<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="过程分析表" data-page-identification="b_nnrlndu6gm">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_okmgm4r31j 自定义模板_05m3ee9ywk -->
      <!--审批详情-->
      <a-modal @cancel="statuState.visible = false" centered :visible="statuState.visible" title="审批详情" :footer="null" :body-style="{ maxHeight: '700px', overflowY: 'auto' }" width="400px">
        <div class="status-item" v-for="(item, index) in statuState.list">
          <div class="title-new-status">
            <div class="left-title"
              >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
            >
            <div class="right-title"
              >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
            >
          </div>
          <a-steps class="status-step" direction="vertical">
            <a-step
              v-for="(inside, index) in item.processTaskList"
              :title="inside.nodeMessage"
              :description="inside.taskName + ':' + inside.assignUserName"
              :status="getIconStatus(inside.nodeStatus)"
            />
          </a-steps>
        </div>
      </a-modal>

      <!--审批详情-->
      <!--         周目标 -->
      <a-modal
        v-model:visible="weekTargetState.weekTargetVisible"
        width="1600px"
        :body-style="{ maxHeight: '680px', overflowY: 'auto', overflowX: 'hidden' }"
        centered
        :footer="null"
        destroy-on-close
        :maskClosable="false"
        class="menu-modal"
      >
        <template #title>
          <div class="custom-header" @contextmenu.prevent="showContextMenu">
            <span class="custom-title">{{ weekTargetState.modalTitle }}</span>
            <div class="context-menu" v-if="titleMenu.visible">
              <a-button type="link" size="smll" @click="handleShowTask">取消隐藏</a-button>
            </div>
          </div>
        </template>
        <div v-for="(target, index) in weekTargetState.targetList" :key="index" class="target-message">
          <div class="target-title" v-if="target.priority == 1">周核心目标：</div>
          <div class="target-title" v-if="target.priority == 2">周目标关键路径：</div>
          <div class="target-title" v-if="target.priority == 3">行动项任务周目标：</div>
          <div class="target-content">
            <a-textarea
              :class="`textarea-${index}`"
              v-if="target.editing"
              :maxlength="1000"
              :rows="3"
              v-model:value="target.weekGoals"
              placeholder="请输入"
              @blur="saveTarget(index)"
              style="width: 1300px"
            />

            <a-tooltip v-else placement="topLeft">
              <template #title>PMO可点击修改任务周目标</template>
              <div
                class="target-span"
                :style="{
                                    width: '1300px',
                                    height: isExpanded(index) ? 'auto' : '32px'
                                }"
                @click="handlerEditTarget(target.value, index)"
              >
                <span v-html="formattedWeekGoals(target.weekGoals) || '--'"></span>
              </div>
            </a-tooltip>

            <a-button @click="toggleExpand(index)" v-if="!target.editing" type="link" style="position: relative; left: 45px">
              {{ isExpanded(index) ? '收起' : '详情' }}
              <template v-if="isExpanded(index)">
                <svg
                  style="position: absolute; right: 0; top: 8px"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="14px"
                  height="14px"
                  viewBox="0 0 14 14"
                  version="1.1"
                >
                  <title>收起</title>
                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="项目周情况-全部展示" transform="translate(-1624, -204)">
                      <g id="编组-3" transform="translate(1592, 201)">
                        <g id="收起" transform="translate(32, 3)">
                          <rect id="矩形" x="0" y="0" width="14" height="14" />
                          <g id="编组" transform="translate(1.75, 1.75)" stroke="#3875FF" stroke-linecap="round" stroke-linejoin="round">
                            <polyline id="路径" points="10.5 0 5.25 5.25 0 0" />
                            <polyline id="路径" points="10.5 5.25 5.25 10.5 0 5.25" />
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </template>
              <template v-else>
                <svg
                  style="position: absolute; right: 0; top: 8px"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="14px"
                  height="14px"
                  viewBox="0 0 14 14"
                  version="1.1"
                >
                  <title>详情</title>
                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="项目周情况-全部" transform="translate(-1364, -80)">
                      <g id="编组-3" transform="translate(1332, 77)">
                        <g id="展开" transform="translate(39, 10) scale(1, -1) translate(-39, -10)translate(32, 3)">
                          <rect id="矩形" x="0" y="0" width="14" height="14" />
                          <g id="编组" transform="translate(1.75, 1.75)" stroke="#3875FF" stroke-linecap="round" stroke-linejoin="round">
                            <polyline id="路径" points="10.5 0 5.25 5.25 0 0" />
                            <polyline id="路径" points="10.5 5.25 5.25 10.5 0 5.25" />
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </template>
            </a-button>
          </div>
        </div>

        <a-table
          class="target-table-box"
          :scroll="{ x: scrollX, y: stateK.tableHeight }"
          :columns="weekColumns"
          :data-source="weekTargetState.weekData"
          bordered
          rowKey="id"
          :loading="weekTableLoading"
          :customRow="customClick"
          @resizeColumn="handleResizeColumn"
        >
          <template #bodyCell="{ column, record, index }">
            <!--                      行动项任务名称-->
            <template v-if="column.dataIndex === 'actionTaskName'">
              <div
                class="finishStandard-div"
                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden',
                                    textAlign: record.actionTaskName ? 'left' : 'center'
                                }"
                >{{ record.actionTaskName || '--' }}</div
              >
            </template>
            <!--                      行动项任务名称-->
            <template v-if="column.dataIndex === 'expanded'">
              <div @click="() => toggleExpand1(record)" style="cursor: pointer; color: #3875ff; display: inline-block">
                {{ record.expanded ? '折叠' : '展开' }}
              </div>
              <!--             <div v-if="menuVisible" style="display: inline-block;cursor: pointer; color: #3875ff"> 隐藏</div>-->
            </template>
            <!--                      核心周目标-->
            <template v-if="column.dataIndex === 'coreWeekContent'">
              <template v-if="record.coreWeekEditing">
                <a-textarea ref="coreWeekInput" v-model:value="record.coreWeekContent" @blur="() => handleSave(record, 'coreWeek', 'coreWeekEditing')" />
              </template>
              <template v-else>
                <div
                  class="action-task"
                  :style="{
                                        cursor: 'pointer',
                                        display: 'inline-block',
                                        width: '100%',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        textAlign: record.coreWeekContent ? 'left' : 'center'
                                    }"
                  @click="() => handleEdit(record, 'coreWeekEditing', 'coreWeekInput')"
                  v-html="formattedWeekGoals(record.coreWeekContent) || '--'"
                ></div>
              </template>
            </template>
            <!--                      核心周目标-->
            <!--                      完成标准-->
            <template v-if="column.dataIndex === 'finishStandard'">
              <div
                class="finishStandard-div"
                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden'
                                }"
                >{{ record.finishStandard || '--' }}</div
              >
            </template>
            <!--                      完成标准-->
            <!--                      任务名称-->
            <template v-if="column.dataIndex === 'taskName'">
              <div
                class="finishStandard-div"
                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden'
                                }"
                >{{ record.taskName || '--' }}</div
              >
            </template>
            <!--                      任务名称-->
            <template v-if="column.dataIndex === 'priority'">
              <template v-if="record.priorityEditing">
                <a-select
                  ref="priorityInput"
                  style="width: 100%"
                  v-model:value="record.priority"
                  :options="[
                                        { label: '1', value: '1' },
                                        { label: '2', value: '2' },
                                        { label: '3', value: '3' }
                                    ]"
                  @blur="() => handleSave(record, 'priority', 'priorityEditing')"
                />
              </template>
              <template v-else>
                <div @click="() => handleEdit(record, 'priorityEditing', 'priorityInput')" class="priority-edit">{{ record.priority }}</div>
              </template>
            </template>
            <!-- 时间 -->
            <template v-else-if="column.dataIndex === 'actionTaskStatus'">
              <template v-if="record.statusEditing">
                <a-textarea ref="statusInput" v-model:value="record.actionTaskStatus" @blur="() => handleSave(record, 'status', 'statusEditing')" />
              </template>
              <template v-else>
                <div
                  class="action-task"
                  :style="{
                                        cursor: 'pointer',
                                        display: 'inline-block',
                                        width: '100%',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        position: 'relative',
                                        textAlign: record.actionTaskStatus ? 'left' : 'center'
                                    }"
                  @click="() => handleEditStatus(record, 'statusEditing', 'statusInput')"
                  v-html="formattedWeekGoals(record.actionTaskStatus) || '--'"
                ></div>
              </template>
            </template>
            <!-- 完成情况备注 -->
            <template v-else-if="column.dataIndex === 'finishRemarks'">
              <template v-if="record.finishEditing">
                <a-textarea ref="finishInput" v-model:value="record.finishRemarks" @blur="() => handleSave(record, 'finish', 'finishEditing')" />
              </template>
              <template v-else>
                <div
                  class="finish-mark"
                  :style="{
                                        cursor: 'pointer',
                                        whiteSpace: 'normal',
                                        wordWrap: 'break-word',
                                        minWidth: '130px',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        textAlign: record.finishRemarks ? 'left' : 'center'
                                    }"
                  @click="() => handleEdit(record, 'finishEditing', 'finishInput')"
                  v-html="formattedWeekGoals(record.finishRemarks) || '--'"
                ></div>
              </template>
            </template>
          </template>
        </a-table>

        <!--        <div class="content-menu" v-if="menuVisible" :style="menuStyle"  @click="handleHideTaskTask">-->
        <!--          隐藏-->
        <!--        </div>-->
        <a-menu :style="menuStyle" v-if="menuVisible">
          <a-menu-item @click="handleHideTask">隐藏</a-menu-item>
        </a-menu>
      </a-modal>

      <!--          周目标-->
      <a-modal
        :visible="scoreState.visible"
        title="加减分详情"
        :footer="null"
        width="1000px"
        @cancel="scoreState.visible = false"
        zIndex="1200"
        centered
        :body-style="{ paddingTop: '16px' }"
        :maskClosable="false"
      >
        <div class="score-title-first">
          <ExclamationCircleOutlined style="color: orange; margin-right: 8px" />已结算的任务不支持通过编辑修改是否扣分，请联系相关领导通过员工绩效页面做修正加减分处理
        </div>
        <div class="score-table" v-if="scoreState.type === '项目总监'">
          <div class="score-title"
            >项目总监加减分总和：<span
              :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
              >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
            >
          </div>

          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
              >{{ item.month }}月绩效结算明细
              <span class="month-score"
                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '项目经理'">
          <div class="score-title"
            >项目经理加减分总和：<span
              :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
              >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
            >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
              >{{ item.month }}月绩效结算明细
              <span class="month-score"
                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '负责人'">
          <div class="score-title"
            >项目负责人和任务执行人加减分总和：<span
              :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
              >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
            >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
              >{{ item.month }}月绩效结算明细
              <span class="month-score"
                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
      </a-modal>
      <a-modal :visible="actionState.visibleRisk" title="风险" width="80vw" centered destroyOnClose :footer="null" @cancel="actionState.visibleRisk = false" :maskClosable="false">
        <a-table
          class="risk-table"
          bordered
          rowKey="taskId"
          :customRow="customRow"
          :columns="actionState.riskColumns"
          :data-source="actionState.riskList"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-button type="link" :disabled="record.riskState === '关闭'" @click="handlerBeforeClose(record)">关闭</a-button>
            </template>
          </template>
        </a-table>
      </a-modal>
      <div class="search-div" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
        <a-form :model="stateK.searchForm" ref="searchRef">
          <a-row :gutter="24" style="height: 32px">
            <a-col :span="4" style="height: 32px; margin-top: 20px">
              <a-form-item label="区域">
                <a-select allow-clear @focus="getAreaList" v-model:value="stateK.searchForm.region" :options="stateK.regionList" />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="margin-top: 20px">
              <a-form-item label="项目阶段">
                <a-select allow-clear @focus="getMilepostList" v-model:value="stateK.searchForm.milepostName" :options="stateK.milepostList" />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="32px;margin-top: 20px">
              <a-form-item label="标签">
                <a-select
                  show-search
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  allow-clear
                  @focus="getLabelList"
                  v-model:value="stateK.searchForm.label"
                  :options="stateK.labelList"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="margin-top: 20px" v-if="isHasTypeFilter">
              <a-form-item label="任务类型">
                <a-select
                  :options="[
                                        {
                                            label: '主流程',
                                            value: '主流程'
                                        },
                                        {
                                            label: '数据专项',
                                            value: '数据专项'
                                        },
                                        {
                                            label: '全品种专项',
                                            value: '全品种专项'
                                        }
                                    ]"
                  :allow-clear="false"
                  v-model:value="stateK.taskType"
                />
              </a-form-item>
            </a-col>
            <a-col :span="3" style="margin-top: 20px"
              ><a-space><a-button type="primary" @click="getTableList">查询</a-button> <a-button type="primary" @click="reset" ghost>重置</a-button></a-space></a-col
            >
          </a-row>
        </a-form>
      </div>
      <div class="search-div" v-else>
        <a-form :model="stateNoTemplate.searchForm" ref="searchRef">
          <a-row :gutter="24" style="height: 32px">
            <a-col :span="4" style="height: 32px; margin-top: 20px">
              <a-form-item label="项目名称">
                <a-select
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  show-search
                  allow-clear
                  @focus="getNoTemplateProject"
                  v-model:value="stateNoTemplate.projectName"
                  :options="stateNoTemplate.projectNameList"
                  @change="projectNameChange"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="32px;margin-top: 20px">
              <a-form-item label="项目阶段">
                <a-select
                  show-search
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  allow-clear
                  @focus="getNoTemplateMilepostList"
                  v-model:value="stateNoTemplate.milepostName"
                  :options="stateNoTemplate.milepostList"
                />
              </a-form-item>
            </a-col>

            <a-col :span="3" style="32px;margin-top: 20px"
              ><a-space><a-button type="primary" @click="getNoTemplate">查询</a-button> <a-button type="default" @click="resetNoTemplate">重置</a-button></a-space></a-col
            >
          </a-row>
        </a-form>
      </div>
      <div class="kb-page">
        <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="24" @change="tabChange(activeKey)">
          <a-tab-pane v-for="(item, index) in stateK.templateList" :key="item.templateId" :tab="item.templateName" />
        </a-tabs>
        <div class="table-tip">
          <div class="left-top">
            <div class="finish"><span class="tip-msg">已完成：</span><div class="finish-box"></div></div>
            <div class="running"><span class="tip-msg">进行中：</span><div class="running-box"></div></div>
            <div class="daily"><span class="tip-msg">延期：</span><div class="daily-box"></div></div>
            <div class="daily"><span class="tip-msg">关联行动项任务延期：</span><div class="association-daily-box"></div></div>
            <div class="unstart"><span class="tip-msg">未启动：</span><div class="unstart-box"></div></div>
            <div class="one-click"><div class="one-click-icon"></div><span>单击标签图标添加备注</span></div>
            <div class="hover-click"><div class="hover-click-icon"></div><span>鼠标悬浮标签查看备注</span></div>
            <div class="db-click"><div class="db-click-icon"></div><span>双击任务表格查看详情</span></div>
            <div class="cercle-click"><div class="cercle-click-icon"></div><span>圆标内数字为风险任务数量</span></div>
            <div class="squire-click"><div class="squire-click-icon"></div><span>方标内数字为行动项任务数量</span></div>
          </div>
          <div class="right-top">
            <a-button style="margin: 15px 0" type="primary" @click="handleGetName" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <template #icon> <EditOutlined /> </template>修改项目简称</a-button
            >
          </div>
        </div>
        <a-spin :spinning="mainLoading.loading" :tip="mainLoading.tip">
          <div class="no-template-main" v-if="activeKey === -1 || activeKey === -2 || activeKey === -3">
            <div class="no-template-content" v-if="noTemplateState.noTemplateData.length == 0">
              <div class="no-img">
                <div class="tip-msg-img">暂无数据</div>
              </div>
            </div>
            <div class="table-item" v-for="(item, index) in noTemplateState.noTemplateData">
              <div class="table-title" @dblclick="showWeekTarget(item, false)"
                >{{ item.name

                }}<div class="action-title-icon" @click="getActionList(item)" v-if="item.actionTaskNumber > 0" @dblclick.stop="">
                  {{ item.actionTaskNumber }}
                </div></div
              >
              <a-table :columns="noTemplateColumns" :data-source="item.data" :pagination="false" bordered :scroll="{ y: stateK.tableHeight }">
                <template #headerCell="{ column, title }"> </template>
                <template #bodyCell="{ column, record, text }">
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="record-div-orange" v-if="record && record.projectProgressEnum === 'ACTION_TASK_DELAY'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-blue" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-blue" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-blue">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-white" v-if="record && record.projectProgressEnum === 'UN_START'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-white" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-white" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-white">{{ record.taskOwner }}</div>
                      <div class="icon-hollow-deep" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""> </div>

                      <div class="icon-solid-deep" v-else-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-green" v-if="record && record.projectProgressEnum === 'FINISH'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-green" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-green" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-green">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-red" v-if="record && record.projectProgressEnum === 'DELAY'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-red" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-red" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-red">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-blue" v-if="record && record.projectProgressEnum === 'RUNNING'" @dblclick="handleGetTask(record)">
                      <div class="risk-num-blue" v-if="record.riskCount" @click="handlerShowRisks(record)">{{ record.riskCount }}</div>
                      <div class="action-num-blue" v-if="record.actionTaskCount" @click="handlerShowAction(record)">{{ record.actionTaskCount }}</div>
                      <div class="task-ower-blue">{{ record.taskOwner }}</div>
                      <div class="icon-hollow" v-if="record.remarks == null" @click.stop="handleRemarks(record)" @dblclick.stop=""></div>
                      <div class="icon-solid" v-if="record.remarks !== null" @click.stop="handleRemarks(record)" @dblclick.stop="">
                        <a-tooltip placement="left" :overlayStyle="remarks - tool">
                          <template #title>{{ record.remarks }}</template>
                          <span class="tool-tip"></span>
                        </a-tooltip>
                      </div>
                    </div>
                    <div class="record-div-hidden" v-if="record && record.projectProgressEnum === 'HIDDEN'" @click="tipMessage"> </div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <div class="kb-table-box" v-else>
            <a-table
              :columns="stateK.columns"
              :data-source="stateK.dataSource"
              bordered
              :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
              :pagination="false"
              :loading="stateK.tableLoading"
              :scroll="{ x: 'max-content', y: stateK.tableHeight }"
            >
              <template #headerCell="{ column, title, index }" style="position: relative">
                <template v-if="column.title !== '项目阶段' && column.title !== '任务名称'">
                  <div class="kb-title" @dblclick="showWeekTarget(column, false)"
                    >{{ title }}
                    <div class="kb-title-icon" @click="getActionList(column)" v-if="column.actionTaskNumber > 0">
                      {{ column.actionTaskNumber }}
                    </div>

                    <a-tooltip placement="top">
                      <template #title> 单击查看场景周情况 </template>
                      <div v-if="column.scene" @click="showWeekTarget(column, true)" @dblclick.stop="" class="cj-title-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
                          <title>任务场景</title>
                          <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="过程分析表" transform="translate(-554, -334)">
                              <g id="任务场景" transform="translate(554, 334)">
                                <rect id="矩形" x="0" y="0" width="16" height="16" />
                                <g id="编组" transform="translate(1, 1)" fill="#3875FF" fill-rule="nonzero">
                                  <path
                                    d="M6.363875,12.726875 C6.71543876,12.726875 7.0004375,13.0118737 7.0004375,13.3634375 C7.0004375,13.7150013 6.71543876,14 6.363875,14 L1.273125,14 C0.569997478,14 0,13.4300025 0,12.726875 L0,1.273125 C0,0.56875 0.569625,0 1.273125,0 L12.726875,0 C13.43125,0 14,0.569625 14,1.273125 L14,5.726875 C14,6.07843876 13.7150013,6.3634375 13.3634375,6.3634375 C13.0118737,6.3634375 12.726875,6.07843876 12.726875,5.726875 L12.726875,1.90925 C12.726875,1.55792786 12.4420721,1.273125 12.09075,1.273125 L1.90925,1.273125 C1.55792786,1.273125 1.273125,1.55792786 1.273125,1.90925 L1.273125,12.09075 C1.273125,12.4425 1.5575,12.726875 1.90925,12.726875 L6.363,12.726875 L6.363875,12.726875 Z M2.545375,2.226875 L6.045375,2.226875 C6.22127769,2.226875 6.363875,2.36947231 6.363875,2.545375 L6.363875,6.045375 C6.363875,6.220375 6.22125,6.363875 6.045375,6.363875 L2.545375,6.363875 C2.36947231,6.363875 2.226875,6.22127769 2.226875,6.045375 L2.226875,2.545375 C2.226875,2.36947231 2.36947231,2.226875 2.545375,2.226875 Z M7.954625,2.226875 L11.454625,2.226875 C11.5390965,2.226875 11.6201082,2.26043115 11.6798385,2.32016149 C11.7395688,2.37989183 11.773125,2.46090355 11.773125,2.545375 L11.773125,6.045375 C11.773125,6.12984645 11.7395688,6.21085817 11.6798385,6.27058851 C11.6201082,6.33031885 11.5390965,6.363875 11.454625,6.363875 L7.954625,6.363875 C7.77872231,6.363875 7.636125,6.22127769 7.636125,6.045375 L7.636125,2.545375 C7.636125,2.36947231 7.77872231,2.226875 7.954625,2.226875 L7.954625,2.226875 Z M2.545375,7.636125 L6.045375,7.636125 C6.220375,7.636125 6.363875,7.77875 6.363875,7.954625 L6.363875,11.454625 C6.363875,11.629625 6.22125,11.773125 6.045375,11.773125 L2.545375,11.773125 C2.46090355,11.773125 2.37989183,11.7395688 2.32016149,11.6798385 C2.26043115,11.6201082 2.226875,11.5390965 2.226875,11.454625 L2.226875,7.954625 C2.226875,7.779625 2.3695,7.636125 2.545375,7.636125 L2.545375,7.636125 Z M8.90925,7.636125 L13.363,7.636125 C13.7145638,7.636125 13.9995625,7.92112374 13.9995625,8.2726875 C13.9995625,8.62425126 13.7145638,8.90925 13.363,8.90925 L8.90925,8.90925 C8.55768624,8.90925 8.2726875,8.62425126 8.2726875,8.2726875 C8.2726875,7.92112374 8.55768624,7.636125 8.90925,7.636125 Z M8.90925,10.182375 L13.363,10.182375 C13.7143221,10.182375 13.999125,10.4671779 13.999125,10.8185 C13.999125,11.1698221 13.7143221,11.454625 13.363,11.454625 L8.90925,11.454625 C8.68182812,11.454625 8.47168163,11.3332969 8.35797068,11.1363438 C8.24425974,10.9393906 8.24425974,10.6967344 8.35797068,10.4997812 C8.47168163,10.3028281 8.68182812,10.1815 8.90925,10.1815 L8.90925,10.182375 Z M8.90925,12.726875 L13.363,12.726875 C13.7145638,12.726875 13.9995625,13.0118737 13.9995625,13.3634375 C13.9995625,13.7150013 13.7145638,14 13.363,14 L8.90925,14 C8.55768624,14 8.2726875,13.7150013 8.2726875,13.3634375 C8.2726875,13.0118737 8.55768624,12.726875 8.90925,12.726875 Z"
                                    id="形状"
                                  />
                                </g>
                              </g>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </a-tooltip>
                  </div>
                </template>
              </template>
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'taskName'">
                  <div class="task-name">
                    <div
                      v-if="record.mark === '里程碑'"
                      :class="{
                                                'task-milestone': record.mark === '里程碑',
                                                'task-milestone-right': record.mark === '里程碑' && record.critialPath
                                            }"
                      >里程碑</div
                    >
                    <div
                      v-else-if="record.mark === '初验'"
                      :class="{
                                                'task-first': record.mark === '初验',
                                                'task-first-right': record.mark === '初验' && record.critialPath
                                            }"
                    ></div>
                    <div
                      v-else-if="record.mark === '终验'"
                      class="task-over"
                      :class="{
                                                'task-over': record.mark === '终验',
                                                'task-over-right': record.mark === '终验' && record.critialPath
                                            }"
                    ></div>
                    <div v-if="record.critialPath" class="critical-path">关键路径</div>
                    <div
                      :class="{
                                                'is-first':
                                                    (record.mark !== null || record.mark !== '') && !record.critialPath,
                                                'is-first-no':
                                                    (record.mark === null || record.mark === '') && !record.critialPath,
                                                'is-first-path':
                                                    (record.mark !== null || record.mark !== '') && record.critialPath,
                                                'is-first-path-no-mark':
                                                    (record.mark === null || record.mark === '') && record.critialPath
                                            }"
                    >
                      <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                        <template #title>
                          <p style="color: #262626; margin: 0">{{ record.taskIndex }} {{ text }}</p>
                        </template>
                        <span class="task-name-title">{{ record.taskIndex }} {{ text }}</span>
                      </a-tooltip>
                    </div>
                  </div>
                </template>
                <template v-if="column.dataIndex === 'milepostName'">
                  <div style="cursor: pointer" @click="handleShowDetail(record)">{{ text }}</div>
                </template>
                <div class="record-div-white" v-if="text && text.projectProgressEnum === 'UN_START'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-white" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                  }}</div>
                  <div class="action-num-white" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-white">{{ text.taskOwner }}</div>
                  <div class="icon-hollow-deep" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""> </div>

                  <div class="icon-solid-deep" v-else-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-green" v-if="text && text.projectProgressEnum === 'FINISH'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-green" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                  }}</div>
                  <div class="action-num-green" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-green">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-red" v-if="text && text.projectProgressEnum === 'DELAY'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-red" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                  }}</div>
                  <div class="action-num-red" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-red">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-blue" v-if="text && text.projectProgressEnum === 'RUNNING'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-blue" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                  }}</div>
                  <div class="action-num-blue" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-blue">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-orange" v-if="text && text.projectProgressEnum === 'ACTION_TASK_DELAY'" @dblclick="handleGetTask(text)">
                  <div class="risk-num-blue" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                  }}</div>
                  <div class="action-num-blue" v-if="text.actionTaskCount" @click="handlerShowAction(text)">{{ text.actionTaskCount }}</div>
                  <div class="task-ower-blue">{{ text.taskOwner }}</div>
                  <div class="icon-hollow" v-if="text.remarks == null" @click.stop="handleRemarks(text)" @dblclick.stop=""></div>
                  <div class="icon-solid" v-if="text.remarks !== null" @click.stop="handleRemarks(text)" @dblclick.stop="">
                    <a-tooltip placement="left">
                      <template #title>{{ text.remarks }}</template>
                      <span class="tool-tip"></span>
                    </a-tooltip>
                  </div>
                </div>
                <div class="record-div-hidden" v-if="text && text.projectProgressEnum === 'HIDDEN'" @click="tipMessage"> </div>
              </template>
            </a-table>
          </div>
        </a-spin>
      </div>
      <!--          修改项目简称-->
      <a-modal v-model:visible="stateK.editNameVisible" @ok="handleChangeName" title="修改项目简称" width="1000px" centered :maskClosable="false" :body-style="stateK.bodyStyle">
        <a-tabs v-model:activeKey="stateK.activeTab">
          <a-tab-pane v-for="(tab, index) in stateK.editNameModel" :key="tab.id" :tab="tab.name">
            <a-form :model="tab.data" :ref="getFormRef(index)">
              <a-row v-for="(item, index) in tab.data" :key="index" :gutter="24">
                <a-col :span="10">
                  <a-form-item label="项目全称" :rules="[{ required: true, message: '请输入项目全称！', trigger: 'blur' }]" :name="[index, 'projectName']">
                    <a-input v-model:value="item.projectName" disabled />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="项目序号" :rules="[{ required: false, validator: validateNum, trigger: 'blur' }]" :name="[index, 'projectSeqNo']">
                    <a-input-number style="width: 100%" :maxlength="30" show-count v-model:value="item.projectSeqNo" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目简称" :rules="{ required: true, validator: validateShortName, trigger: 'blur' }" :name="[index, 'projectShortName']">
                    <a-input v-model:value="item.projectShortName" :maxlength="30" show-count />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </a-modal>
      <!--          修改项目简称-->
      <!--          任务详情弹窗-->
      <a-modal v-model:visible="stateK.taskVisible" title="任务详情" :footer="null" width="1000px" centered :maskClosable="false">
        <a-spin :spinning="detailSping" tip="加载中">
          <div class="task-detail">
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">项目总监</div>
                <div class="two-right text-bold">{{ stateK.taskDataSource.projectDirector }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">项目经理</div>
                <div class="two-right text-bold">{{ stateK.taskDataSource.pmName }}</div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">项目阶段</div>
                <div class="two-right">{{ stateK.taskDataSource.milepostName }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">任务名称</div>
                <div class="two-right">
                  <a-tooltip>
                    <template #title>{{ stateK.taskDataSource.taskName }}</template>
                    <span class="task-name-long">{{ stateK.taskDataSource.taskName }}</span>
                  </a-tooltip>
                </div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">任务状态</div>
                <div class="two-right">
                  <div class="task-status-new" @click="getTaskStatus(stateK.taskDataSource.taskId, 0)">
                    <div class="wqd-btn" style="margin-top: 8px; margin-left: 0" v-if="stateK.taskDataSource.taskStatus === '未启动'">未启动</div>
                    <div class="jxz-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource.taskStatus === '进行中'">进行中</div>
                    <div class="wc-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource.taskStatus === '完成'">完成</div>
                    <div class="yq-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource.taskStatus === '延期'" color="#F5222D">延期</div>
                    <div class="yqwc-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource.taskStatus === '延期完成'" color="#FAAD14">延期完成</div>
                    <div class="spz-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource.taskStatus === '审批中'" color="#FAAD14">审批中</div>
                    <div class="wqd-btn" style="margin-top: 8px; margin-left: 0" v-else-if="stateK.taskDataSource.taskStatus === '下线'" color="#FAAD14">下线</div>
                    <div v-else>{{ stateK.taskDataSource.taskStatus }}</div>
                  </div>
                </div>
              </div>
              <div class="two-item">
                <div class="two-left">任务进度</div>
                <div class="two-right">{{ stateK.taskDataSource.taskSchedule }}</div>
              </div>
            </div>
            <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <div class="one-left">完成标准</div>
              <div class="one-right">
                <p style="color: #262626; margin: 0" v-for="(item, index) in handlerGetSpace(stateK.taskDataSource.finishStandard)" :key="index">{{ item }}</p>
              </div>
            </div>
            <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <div class="one-left">审核标准及注意事项</div>
              <div class="one-right">
                <p style="color: #262626; margin: 0" v-for="(item, index) in handlerGetSpace(stateK.taskDataSource.assessorStandard)" :key="index">{{ item }}</p>
              </div>
            </div>
            <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <div class="one-left">SOP</div>
              <div class="one-right">
                <p class="task-dependency">{{ stateK.taskDataSource.taskDependency }}</p>
              </div>
            </div>
            <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <div class="one-left">甲方工作事项</div>
              <div class="one-right">
                <p style="color: #262626; margin: 0" v-for="(item, index) in handlerGetSpace(stateK.taskDataSource.taskRemarks)" :key="index">{{ item }}</p>
              </div>
            </div>
            <div class="one-line" v-if="activeKey !== -1 && activeKey !== -2 && activeKey !== -3">
              <div class="one-left">附件模板</div>
              <div class="one-right">
                <a
                  v-for="(item, index) in stateK.taskDataSource.attachmentTemplateList"
                  :key="index"
                  href="javascript:"
                  @click="attachmentTemplateDownLoad(item)"
                  :class="[
                                        'block',
                                        index > 2 && !stateK.taskDataSource.attachmentShowAll ? 'hide' : ''
                                    ]"
                >
                  {{ item.name }}
                </a>
              </div>
            </div>
            <div class="one-line">
              <div class="one-left">附件</div>
              <div class="one-right">
                <a
                  v-for="(item, index) in stateK.taskDataSource.ppmEnclosureInfoList"
                  :key="index"
                  href="javascript:"
                  @click="handlerDownload(item)"
                  :class="[
                                        'block',
                                        index > 2 && !stateK.taskDataSource.attachmentShowAll ? 'hide' : ''
                                    ]"
                >
                  {{ item.name }}
                </a>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">任务负责人</div>
                <div class="two-right">{{ stateK.taskDataSource.taskOwner }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">审核员</div>
                <div class="two-right">{{ stateK.taskDataSource.assessorName }}</div>
              </div>
            </div>
            <div class="one-line">
              <div class="one-left">任务执行人</div>
              <div class="one-right">
                {{ stateK.taskDataSource.taskParticipantStr }}
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">计划开始</div>
                <div class="two-right">{{ stateK.taskDataSource.startTime }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">实际开始</div>
                <div class="two-right">{{ stateK.taskDataSource.actualStarTime }}</div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">计划完成</div>
                <div class="two-right">{{ stateK.taskDataSource.endTime }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">实际完成</div>
                <div class="two-right">{{ stateK.taskDataSource.taskFinishTime }}</div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">计划工时（小时）</div>
                <div class="two-right">{{ stateK.taskDataSource.workingHours }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">实际工时（小时）</div>
                <div class="two-right">{{ stateK.taskDataSource.actualWorkHours }}</div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">工时投入状态</div>
                <div class="two-right">{{ stateK.taskDataSource.stateInput }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">审批状态</div>
                <div class="two-right">{{ stateK.taskDataSource.approvalStatus }}</div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">优先级</div>
                <div class="two-right">{{ stateK.taskDataSource.priorityStr }}</div>
              </div>
              <div class="two-item">
                <div class="two-left">未关闭风险数量</div>

                <div class="two-right risk-num">
                  <span @click="handlerShowRisks(current)">{{
                                        stateK.taskDataSource.unclosedRiskNumber
                  }}</span>
                </div>
              </div>
            </div>
            <div class="two-line">
              <div class="two-item">
                <div class="two-left">行动项任务数</div>
                <div class="two-right risk-num" @click="handlerShowAction(current)">{{
                                    stateK.taskDataSource.actionTaskCount
                }}</div>
              </div>
              <div class="two-item">
                <div class="two-left"></div>

                <div class="two-right risk-num"> </div>
              </div>
            </div>
            <div class="detail-table">
              <div class="detail-title">子任务列表</div>
              <a-table
                bordered
                rowKey="taskId"
                :loading="detailSping"
                :columns="detailColumns"
                :data-source="stateK.taskDetailSelectList"
                :pagination="false"
                :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                :scroll="{ x: scrollX, y: stateK.tableHeight }"
              >
                <template #bodyCell="{ column, record, text }">
                  <!-- 倒计时 -->
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                      <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                      <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                      <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                      <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                      <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                      <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                      <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                      <div v-else>{{ text }}</div>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'attachment'">
                    <a
                      v-for="(item, index) in record.ppmEnclosureInfoList"
                      :key="index"
                      href="javascript:"
                      @click="handlerDownload(item)"
                      :class="[
                                                'block',
                                                index > 2 && !stateK.taskDataSource.attachmentShowAll ? 'hide' : ''
                                            ]"
                      style="overflow: hidden; width: 185px; display: block"
                      :title="item.name"
                    >
                      {{ item.name }}
                    </a>
                  </template>
                  <template
                    v-if="
                                            column.dataIndex === 'unclosedRiskNumber' ||
                                            column.dataIndex === 'riskNumber'
                                        "
                  >
                    <a @click="handlerShowRisks(record)">
                      {{ text }}
                    </a>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
        </a-spin>
      </a-modal>
      <!--          任务详情弹窗-->
      <!--          风险弹窗-->
      <a-modal :visible="stateK.visibleRisk" title="风险" width="80vw" centered destroyOnClose :footer="null" @cancel="stateK.visibleRisk = false" :maskClosable="false">
        <div class="default-table">
          <a-table
            bordered
            rowKey="taskId"
            :customRow="customRow"
            :columns="riskColumns"
            :data-source="stateK.riskList"
            :pagination="false"
            :scroll="{ y: '80vw' }"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'operation'">
                <a-button type="link" :disabled="record.riskState === '关闭'" @click="handlerBeforeClose(record)"> 关闭 </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <!--          风险-->
      <!--          备注-->
      <a-modal centered v-model:visible="stateK.remarksVisible" title="添加备注" @ok="handleCreateRemarsk" :maskClosable="false">
        <a-textarea v-model:value="stateK.remarks" placeholder="请输入备注" :maxlength="1000" :rows="4" show-count />
      </a-modal>
      <!--          备注-->
      <!--      行动项-->
      <a-modal
        :visible="stateK.visibleAction"
        title="行动项任务"
        width="80vw"
        centered
        class="xdx-table"
        destroyOnClose
        :footer="null"
        @cancel="stateK.visibleAction = false"
        :body-style="{ maxHeight: '600px', overflowY: 'auto' }"
        :maskClosable="false"
      >
        <div class="action-select">
          <a-form-item label="任务状态" style="height: 30px">
            <a-select
              :max-tag-count="3"
              v-model:value="stateK.selectActionStatus"
              mode="multiple"
              allow-clear
              :options="[
                                { label: '未启动', value: '未启动' },
                                { label: '进行中', value: '进行中' },
                                { label: '审批中', value: '审批中' },
                                { label: '延期', value: '延期' },
                                { label: '完成', value: '完成' },
                                { label: '延期完成', value: '延期完成' }
                            ]"
              style="width: 350px; margin-bottom: 12px"
              @change="getActionList(currentColumn, stateK.selectActionStatus)"
            />
          </a-form-item>
        </div>
        <div class="default-table">
          <a-table
            bordered
            rowKey="taskId"
            :columns="ActionColumns"
            :data-source="stateK.actionList"
            :pagination="false"
            :scroll="{ y: stateK.tableHeight }"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'taskStatusOnOrOff'">
                <a-switch :checked="record['taskStatusOnOrOff']" :disabled="record.nodeType === 'MENU' || !actionState.projectManager" @click="changeTaskStatusOnOrOff(record)" />
              </template>
              <!--                                新-任务进度-->
              <template v-if="column.dataIndex === 'taskSchedule'">
                <a-progress
                  :percent="record.taskSchedule"
                  status="active"
                  @click="
                                        changeTaskSchedule(
                                            record.finishPermission,
                                            record.taskSchedule,
                                            record.taskId,
                                            record.taskStatus
                                        )
                                    "
                />
              </template>
              <!--                                end新-任务进度-->
              <!-- 新-审核标准字段 -->
              <template v-if="column.dataIndex === 'assessorStandard'">
                <a-tooltip @mouseenter="handlerGetStandard(record)" placement="top" :overlayStyle="standardStyle" color="#fff">
                  <template #title>
                    <p style="color: #262626; margin: 0" v-for="(item, index) in actionState.standardList" :key="index">{{ item }}</p>
                  </template>
                  <div
                    style="
                                            min-width: 70px;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                        "
                    >{{ text }}</div
                  >
                </a-tooltip>
              </template>
              <!-- 审核标准 -->
              <template v-if="column.dataIndex === 'unclosedRiskNumber' || column.dataIndex === 'riskNumber'">
                <a
                  @click="
                                        handlerActionShowRisks(
                                            record.actionTaskId,
                                            column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                        )
                                    "
                >
                  {{ text }}
                </a>
              </template>
              <!-- 附件模板 -->

              <template v-if="column.dataIndex === 'attachmentTemplate'">
                <!--                                  预览/下载-->
                <div v-for="(item, index) in record.attachmentTemplateList" :key="index">
                  <a-dropdown>
                    <span
                      style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                      :title="item.name"
                    >
                      {{ item.name }}
                    </span>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" :disabled="!item.type.startsWith('image')" @click="previewAttachment(item)">预览</a-button>
                        </a-menu-item>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" @click="attachmentTemplateDownLoad(item)">下载</a-button>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
                <!--                                  预览/下载-->
              </template>
              <template v-if="column.dataIndex === 'milepostName'">
                {{ text }}
              </template>
              <!-- 倒计时 -->
              <template v-if="column.dataIndex === 'countDown'">
                <div class="count-down-content">
                  <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff" v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]">
                    <template #title>
                      <div class="count-down-hover">
                        <p v-for="(item, index) in record.hoverLabelList" :key="index">{{
                                                    item
                        }}</p>
                      </div>
                    </template>
                    <div class="count-down"
                      >{{
                                                splitStringByColon(
                                                    shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                                                )[0]

                      }}:<span class="weight-num">{{
                                                splitStringByColon(
                                                    shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                                                )[1]
                      }}</span></div
                    >
                  </a-tooltip>
                  <div v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]" class="extension-color">
                    {{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                            )[0]

                    }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                            )[1]
                    }}</span>
                  </div>

                  <div
                    v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[0]"
                    :class="{
                                            'all-group-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            ),
                                            'all-group-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )
                                        }"
                    @click="showScore(record.projectDirectorLabelList, '项目总监')"
                    >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )[0]

                    }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )[1]
                    }}</span></div
                  >

                  <div
                    v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[0]"
                    :class="{
                                            'pm-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            ),
                                            'pm-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )
                                        }"
                    @click="showScore(record.pmLabelList, '项目经理')"
                    >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )[0]

                    }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )[1]
                    }}</span></div
                  >

                  <div
                    v-if="shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[0]"
                    :class="{
                                            'ower-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            ),
                                            'ower-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )
                                        }"
                    @click="showScore(record.taskOwnerLabelList, '负责人')"
                    >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )[0]

                    }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )[1]
                    }}</span></div
                  >
                </div>
              </template>
              <!-- 倒计时 -->
              <template v-if="column.dataIndex === 'taskStatus'">
                <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                  <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                  <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                  <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                  <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                  <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                  <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                  <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                  <div v-else>{{ text }}</div>
                </div>
              </template>
              <template v-if="column.dataIndex === 'attachment'">
                <!--                                  预览/下载-->
                <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                  <a-dropdown>
                    <span
                      style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                      :title="item.name"
                    >
                      {{ item.name }}
                    </span>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" :disabled="!item.type.startsWith('image')" @click="previewAttachment(item)">预览</a-button>
                        </a-menu-item>
                        <a-menu-item>
                          <a-button style="width: 100%" type="link" size="small" @click="handlerDownload(item)">下载</a-button>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
                <!--                                  预览/下载-->
              </template>
              <template v-if="column.dataIndex === 'operation'">
                <a-button size="small" v-if="record.taskStatus === '未启动'" type="link" @click="handleActionStart(record)"> 开始 </a-button>
                <a-button size="small" v-else type="link" @click="actionBeforeOk(record)"> 完成 </a-button>
                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                <a-button size="small" type="link" :disabled="record.disabledEditBtn" @click="handlerEditAction(record)"> 编辑 </a-button>
                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                <a-popconfirm title="确定要删除吗？" :disabled="record.disabledDelBtn" @confirm="handlerDeleteAction(record)">
                  <a-button size="small" :disabled="record.disabledDelBtn" type="link">删除</a-button>
                </a-popconfirm>
                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                <a-button size="small" type="link" :disabled="record.disabledNoteBtn" @click="handlerShowActionNotes(record)"> 历史备注 </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <!--      行动项-->
      <!-- 项目阶段详情 -->
      <a-modal
        width="568px"
        centered
        v-model:visible="phaseInfo.modelOpen"
        title="详情"
        :maskClosable="false"
        :footer="false"
        wrapClassName="phase-wrapper"
        :bodyStyle="{
                    padding: '10px 24px 16px 24px'
                }"
      >
        <div class="title">
          {{ phaseInfo.milepostName }}
        </div>
        <div class="content">
          <div class="sub-title">当前项目阶段目标：</div>
          <div class="text" v-show="phaseInfo.milepostGoals">{{ phaseInfo.milepostGoals }}</div>
        </div>
        <div class="content">
          <div class="sub-title">当前项目阶段关键路径：</div>
          <div class="text" v-show="phaseInfo.milepostCriticalPath">{{ phaseInfo.milepostCriticalPath }}</div>
        </div>
      </a-modal>
      <!-- 项目阶段详情 -->
      <!-- end vid_okmgm4r31j 自定义模板_05m3ee9ywk -->
      <!-- begin vid_3lguy80ipe 容器_znyt38tdv3 -->
      <al-box v-if="false" class="vid_3lguy80ipe">
        <!-- begin vid_8v3w3mbad9 修改项目简称 -->
        <a-button v-permission="'3000000359_vid_8v3w3mbad9'" class="vid_8v3w3mbad9"> 修改项目简称 </a-button>
        <!-- end vid_8v3w3mbad9 修改项目简称 -->
        <!-- begin vid_mgc57dq1hl 项目周情况维护 -->
        <a-button v-permission="'3000000359_vid_mgc57dq1hl'" class="vid_mgc57dq1hl"> 项目周情况维护 </a-button>
        <!-- end vid_mgc57dq1hl 项目周情况维护 -->
        <!-- begin vid_82xqfhwr8a 双击任务详情 -->
        <a-button v-permission="'3000000359_vid_82xqfhwr8a'" class="vid_82xqfhwr8a"> 双击任务详情 </a-button>
        <!-- end vid_82xqfhwr8a 双击任务详情 -->
      </al-box>
      <!-- end vid_3lguy80ipe 容器_znyt38tdv3 -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  import { nextTick } from 'vue'

      const activeKey = ref(null)
      const stateK = reactive({
          templateList: [],
          standardList: [],
          tableLoading: false,
          tableHeight: 520,
          searchForm: {
              region: undefined,
              milepostName: undefined,
              taskStatus: undefined,
              time: undefined,
              label: undefined
          },
          regionList: [],
          milepostList: [],
          labelList: [],
          columns: [
              {
                  title: '项目阶段',
                  dataIndex: 'milepostName',
                  fixed: 'left',
                  align: 'center',
                  width: '120px',
                  ellipsis: true,
                  customCell: item => {
                      const { rowIndex, rowSpan } = item
                      return {
                          rowSpan: rowSpan,
                          style: {
                              fontSize: '16px',
                              color: '#262626',
                              fontWeight: '600',
                              // borderTop: rowIndex ? '2px solid #C2C4C9' : 'none',
                              backgroundColor: '#F7FAFF'
                          }
                      }
                  }
              },
              {
                  title: '任务名称',
                  dataIndex: 'taskName',
                  width: '220px',
                  ellipsis: true,
                  align: 'center',
                  fixed: 'left',
                  customCell: ({ rowSpan, rowIndex, border }) => {
                      return {
                          style: {
                              backgroundColor: '#F7FAFF',
                              padding: '0 10px'
                          }
                      }
                  }
              }
          ],
          dataSource: [],
          editNameVisible: false,
          // editNameActiveKey: '0',
          editNameModel: [],
          // 任务详情列表
          taskDataSource: {},
          taskDetailSelectList: [],
          taskDetailSelectId: undefined,
          taskVisible: false,
          riskList: [],
          actionList: [],
          selectActionStatus: ['未启动', '进行中', '审批中', '延期'],
          visibleRisk: false,
          visibleAction: false,
          remarksVisible: false,
          remarks: undefined,
          taskType: '主流程',
          activeTab: '',
          bodyStyle: {
              padding: '0 24px 0px 24px',
              height: '800px',
              overflow: 'auto'
          }
      })
      const current = ref({})
      const riskColumns = [
          {
              title: '风险描述',
              dataIndex: 'riskDescription',
              width: '170px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          { title: '解决方案', dataIndex: 'solution', align: 'center' },
          { title: '风险状态', dataIndex: 'riskState', align: 'center' },
          { title: '提交人', dataIndex: 'reportedBy', align: 'center' },
          { title: '提交时间', dataIndex: 'dailyDate', align: 'center' },
          { title: '解决人', dataIndex: 'closeRiskPerson', align: 'center' },
          { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' }
      ]
      const ActionColumns = [
          {
              title: '行动项任务名称',
              dataIndex: 'actionTaskName',
              ellipsis: true,
              resizable: true,
              width: '220px',
              align: 'center'
          },
          {
              title: '任务状态',
              dataIndex: 'taskStatus',
              resizable: true,
              ellipsis: false,
              width: '140px',
              align: 'center'
          },
          {
              title: '任务进度',
              dataIndex: 'taskSchedule',
              resizable: true,
              ellipsis: false,
              width: '140px',
              align: 'center'
          },
          {
              title: '倒计时及加减分',
              dataIndex: 'countDown',
              resizable: true,
              ellipsis: false,
              width: '250px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px'
                      }
                  }
              }
          },
          {
              title: '附件',
              dataIndex: 'attachment',
              resizable: true,
              ellipsis: true,
              width: '200px',
              align: 'center'
          },
          {
              title: '未关闭风险数量',
              dataIndex: 'unclosedRiskNumber',
              resizable: true,
              ellipsis: true,
              width: '200px',
              align: 'center'
          },
          {
              title: '任务负责人',
              dataIndex: 'taskOwner',
              resizable: true,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '审核员',
              dataIndex: 'assessorName',
              resizable: true,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: 'PMO',
              dataIndex: 'projectManagementOffice',
              resizable: true,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '任务执行人',
              resizable: true,
              dataIndex: 'taskParticipantStr',
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '计划开始',
              dataIndex: 'startTime',
              resizable: true,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '实际开始',
              dataIndex: 'examPassTime',
              resizable: true,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '计划完成',
              dataIndex: 'endTime',
              ellipsis: true,
              width: '120px',
              resizable: true,
              align: 'center'
          },
          {
              title: '	实际完成',
              dataIndex: 'taskFinishTime',
              ellipsis: true,
              resizable: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '计划工时(小时)',
              dataIndex: 'workingHours',
              resizable: true,
              ellipsis: true,
              width: '130px',
              align: 'center'
          },
          {
              title: '实际工时(小时)',
              dataIndex: 'actualWorkHours',
              resizable: true,
              ellipsis: true,
              width: '130px',
              align: 'center'
          },
          {
              title: '工时投入状态',
              dataIndex: 'stateInput',
              resizable: true,
              ellipsis: true,
              width: '120px',
              align: 'center'
          }
      ]
      const taskColumns = [
          {
              title: '项目阶段',
              dataIndex: 'milepostName',

              ellipsis: true,
              width: '140px',
              fixed: 'left',
              align: 'left',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },

          {
              title: '任务名称',
              dataIndex: 'taskName',
              ellipsis: true,

              width: '220px',
              fixed: 'left',
              align: 'left',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '任务状态',
              dataIndex: 'taskStatus',

              ellipsis: false,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '任务进度',
              dataIndex: 'taskSchedule',

              ellipsis: false,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '倒计时及加减分',
              dataIndex: 'countDown',

              ellipsis: false,
              width: '210px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px'
                      }
                  }
              }
          },
          {
              title: '未关闭风险数量',
              dataIndex: 'unclosedRiskNumber',

              ellipsis: true,
              width: '150px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          // 新-模板项目完成标准字段
          {
              title: '完成标准',
              dataIndex: 'finishStandard',

              ellipsis: true,
              width: '200px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          // 新-模板项目审核标准字段
          {
              title: '审核标准及注意事项',
              dataIndex: 'assessorStandard',

              ellipsis: true,
              width: '200px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '甲方工作事项',
              dataIndex: 'taskRemarks',

              ellipsis: true,
              width: '200px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '附件模板',
              dataIndex: 'attachmentTemplate',

              ellipsis: true,
              width: '200px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '附件',
              dataIndex: 'attachment',

              ellipsis: true,
              width: '200px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '任务负责人',
              dataIndex: 'taskOwner',

              ellipsis: true,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '审核员',
              dataIndex: 'assessorName',

              ellipsis: true,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },

          {
              title: '任务执行人',

              dataIndex: 'taskParticipantStr',
              ellipsis: true,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '计划开始',
              dataIndex: 'startTime',

              ellipsis: true,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '实际开始',
              dataIndex: 'actualStarTime',

              ellipsis: true,
              width: '140px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '计划完成',
              dataIndex: 'endTime',
              ellipsis: true,
              width: '120px',

              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '	实际完成',
              dataIndex: 'taskFinishTime',
              ellipsis: true,

              width: '120px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '计划工时(小时)',
              dataIndex: 'workingHours',

              ellipsis: true,
              width: '130px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '实际工时(小时)',
              dataIndex: 'actualWorkHours',

              ellipsis: true,
              width: '130px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '工时投入状态',
              dataIndex: 'stateInput',

              ellipsis: true,
              width: '120px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },

          {
              title: '审批状态',
              dataIndex: 'approvalStatus',

              ellipsis: true,
              width: '200px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },
          {
              title: '优先级',
              dataIndex: 'priorityStr',

              ellipsis: true,
              width: '100px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },

          {
              title: '风险数量',
              dataIndex: 'riskNumber',

              ellipsis: true,
              width: '100px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          },

          {
              title: '依赖任务',
              dataIndex: 'taskDependency',

              ellipsis: true,
              width: '90px',
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          height: '40px',
                          padding: '0 10px'
                      }
                  }
              }
          }
      ]

      onMounted(() => {
          get('/solution-ppm/api/v2/built-in-system-ppm/tpm/table_list').then(data => {
              if (data.code === 200) {
                  stateK.templateList = data.data
                  activeKey.value = stateK.templateList[0].templateId
                  getTableList()
                  getIsHasFilter()
              } else {
                  message.error(data.message || '获取模板列表失败')
              }
          })
      })

      function tabChange(activeKey) {
          if (activeKey === -1 || activeKey === -2 || activeKey === -3) {
              resetNoTemplate()
          } else {
              getTableList()
          }
          getIsHasFilter()
      }

      function getTableList() {
          mainLoading.loading = true
          const params = {
              templateId: activeKey.value,
              milePostName: stateK.searchForm.milepostName || '',
              areaName: stateK.searchForm.region || '',
              label: stateK.searchForm.label,
              templateTaskType: stateK.taskType
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/tpm/progress/search', params)
              .then(data => {
                  if (data.code === 200) {
                      // 过滤掉标题为 "项目阶段" 或 "任务名称" 的对象
                      let filteredColumns = data.data.columns.filter(
                          column => column.title !== '项目阶段' && column.title !== '任务名称'
                      )
                      filteredColumns.forEach(item => {
                          ;(item.width = 165), (item.ellipsis = true), (item.align = 'center')
                      })
                      const oldColumns = stateK.columns.filter(
                          column => column.title === '项目阶段' || column.title === '任务名称'
                      )
                      let combinedColumns = oldColumns.concat(filteredColumns)
                      stateK.columns = combinedColumns
                      stateK.columns.forEach((column, index) => {
                          column.index = index
                      })
                      stateK.dataSource = data.data.dataSource
                      formattedData()
                      stateK.dataSource = groupData(stateK.dataSource)
                  } else {
                      message.error(data.message || '获取任务列表失败')
                      stateK.columns = stateK.columns.filter(
                          column => column.title === '项目阶段' || column.title === '任务名称'
                      )
                      stateK.dataSource = []
                  }
              })
              .finally(() => {
                  mainLoading.loading = false
              })
      }

      const stateNoTemplate = reactive({
          projectName: undefined,
          projectNameList: [],
          milepostName: undefined,
          milepostList: [],

          taskStatus: undefined,
          time: undefined,
          label: undefined
      })

      function getNoTemplate() {
          mainLoading.loading = true
          const params = {
              templateId: activeKey.value,
              projectId: stateNoTemplate.projectName,
              milePostId: stateNoTemplate.milepostName
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/tpm/noTemplate/progress/search', params)
              .then(data => {
                  noTemplateState.noTemplateData = groupCheckData(data.data)
              })
              .finally(() => {
                  mainLoading.loading = false
              })
      }

      function reset() {
          stateK.searchForm.milepostName = ''
          stateK.searchForm.region = ''
          stateK.searchForm.label = ''
          getTableList()
      }

      function resetNoTemplate() {
          ;(stateNoTemplate.projectName = undefined),
              (stateNoTemplate.projectNameList = []),
              (stateNoTemplate.milepostName = undefined),
              (stateNoTemplate.milepostList = []),
              (stateNoTemplate.taskStatus = undefined),
              (stateNoTemplate.time = undefined)
          getNoTemplate()
      }

      function getAreaList() {
          get('/solution-ppm/api/v2/built-in-system-ppm/project_template/ptf/search').then(data => {
              if (data.code === 200) {
                  stateK.regionList = data.data.map(item => {
                      return {
                          label: item.areaName,
                          value: item.areaName
                      }
                  })
              } else {
                  message.error('获取项目阶段失败')
              }
          })
      }

      function getMilepostList() {
          get('/solution-ppm/api/v2/built-in-system-ppm/project/template/1/stage/list').then(data => {
              if (data.code === 200) {
                  stateK.milepostList = data.data.map(item => {
                      return {
                          label: item.stageName,
                          value: item.stageName
                      }
                  })
              } else {
                  message.error('获取项目阶段失败')
              }
          })
      }
      function getLabelList() {
          post('/solution-ppm/api/v2/built-in-system-ppm/tpm/mappgin_search', { templateId: activeKey.value }).then(
              data => {
                  if (data.code === 200) {
                      stateK.labelList = data.data.map(item => {
                          return {
                              label: item,
                              value: item
                          }
                      })
                  } else {
                      message.error('获取标签失败')
                  }
              }
          )
      }

      function formattedData() {
          stateK.dataSource = stateK.dataSource.map(item => {
              const formattedItem = {
                  id: item.id,
                  milepostName: item.milepostName,
                  taskName: item.taskName,
                  mark: item.mark,
                  critialPath: item.critialPath,
                  ...item
              }

              // 检查是否存在 projectDataMap 字段
              if (item.projectDataMap && Object.keys(item.projectDataMap).length > 0) {
                  for (const projectName in item.projectDataMap) {
                      const project = item.projectDataMap[projectName]
                      formattedItem[projectName] = {
                          name: project.projectName || '',
                          id: project.id || '',
                          projectProgressEnum: project.projectProgressEnum || '',
                          remarks: project.remarks || null,
                          rowSpan: project.rowSpan || '',
                          projectId: project.projectId || '',
                          taskId: project.taskId || '',
                          taskOwner: project.taskOwner || '',
                          riskCount: project.riskCount || '',
                          actionTaskCount: project.actionTaskCount || ''
                      }
                  }
              } else {
                  // 如果 projectDataMap 为空，则将原对象值复制回去
                  formattedItem.projectName = ''
                  formattedItem.id = ''
                  formattedItem.projectProgressEnum = ''
                  formattedItem.remarks = null
                  formattedItem.rowSpan = ''
                  formattedItem.projectId = ''
                  formattedItem.taskId = ''
                  formattedItem.riskCount = ''
                  formattedItem.taskOwner = ''
                  formattedItem.actionTaskCount = ''
              }

              return formattedItem
          })
      }

      const toggleExpand1 = record => {
          record.expanded = !record.expanded
      }

      function groupData(data) {
          let milepostName = ''
          if (!data || !data.length) {
              return []
          }
          return data.map((item, index) => {
              if (milepostName !== item.milepostName) {
                  milepostName = item.milepostName
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (milepostName === data[i].milepostName) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
                  item.border = index
              } else {
                  item.rowSpan = 0
              }
              item.rowIndex = index
              return item
          })
      }

      function handlerDownload({ url, name }) {
          function downBlob(blob) {
              const downloadElement = document.createElement('a')
              const href = window.URL.createObjectURL(blob) // 创建下载的链接
              downloadElement.href = href
              downloadElement.download = name // 下载后文件名
              document.body.appendChild(downloadElement)
              downloadElement.click() // 点击下载
              document.body.removeChild(downloadElement) // 下载完成移除元素
              window.URL.revokeObjectURL(href)
          }

          const data = new FormData()
          data.append('path', url)
          post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
              responseType: 'blob',
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          }).then(blob => {
              downBlob(blob)
          })
      }

      function handleGetTask(text) {
          current.value = text
          if (activeKey.value !== -1 && activeKey.value.value !== -2 && activeKey.value.value !== -3) {
              detailSping.value = true
              get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/${text.taskId}`)
                  .then(data => {
                      if (data.code === 200) {
                          stateK.taskDetailSelectList = data.data.children || []
                          stateK.taskDataSource = data.data
                          stateK.taskVisible = true
                      } else {
                          message.error('获取任务详情失败')
                      }
                  })
                  .finally(() => {
                      detailSping.value = false
                  })
          } else {
              get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/${text.taskId}`)
                  .then(data => {
                      if (data.code === 200) {
                          stateK.taskDataSource = data.data
                          stateK.taskVisible = true
                      } else {
                          message.error('获取任务详情失败')
                      }
                  })
                  .finally(() => {
                      detailSping.value = false
                  })
          }
      }
      const detailSping = ref(false)
      function handlerShowRisks(record, type = '未关闭') {
          get(`/solution-ppm/api/v2/built-in-system-ppm/daily/${record.taskId}/${type}/queryRiskList`).then(
              ({ dataList }) => {
                  stateK.riskList = dataList
                  stateK.visibleRisk = true
              }
          )
      }

      function handlerShowAction(record) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${record.taskId}`).then(data => {
              stateK.actionList = data.data.dataList
              stateK.visibleAction = true
          })
      }

      //     备注
      function handleRemarks(text) {
          if (!text.taskId || !text.projectId) {
              message.error('问题数据，taskId或projectId为空')
          } else {
              current.value = text
              stateK.remarks = text.remarks || ''
              stateK.remarksVisible = true
          }
      }

      function handleCreateRemarsk() {
          const params = {
              projectId: current.value.projectId,
              taskId: current.value.taskId,
              remarks: stateK.remarks
          }
          put('/solution-ppm/api/v2/built-in-system-ppm/tpm/remarks/modify', params).then(data => {
              if (data.code === 200) {
                  message.success('添加成功')
                  stateK.remarksVisible = false
                  getTableList()
                  current.value = {}
                  if (activeKey.value === -1 || activeKey.value === -2 || activeKey.value === -3) {
                      getNoTemplate()
                  }
              } else {
                  message.error(data.message || '添加失败')
              }
          })
      }

      //     改名
      function handleGetName() {
          post('/solution-ppm/api/v2/built-in-system-ppm/tpm/search').then(data => {
              if (data.code === 200) {
                  stateK.editNameVisible = true
                  stateK.editNameModel = data.data
                  stateK.activeTab = stateK.editNameModel[0].id
              } else {
                  message.error(data.message || '获取项目简称失败')
              }
          })
      }

      const editNameRef = ref([])
      const getFormRef = index => {
          editNameRef.value[index] = editNameRef.value[index] || ref(null)
          return editNameRef.value[index]
      }

      function handleChangeName() {
          let formData = []
          Promise.all(editNameRef.value.map(formRef => formRef.value[0].validate()))
              .then(() => {
                  stateK.editNameModel.forEach(tab => {
                      tab.data.forEach(item => {
                          formData.push({
                              mappingId: item.mappingId,
                              projectId: item.projectId,
                              projectName: item.projectName,
                              projectSeqNo: item.projectSeqNo,
                              projectShortName: item.projectShortName,
                              templateId: item.templateId
                          })
                      })
                  })
                  put('/solution-ppm/api/v2/built-in-system-ppm/tpm/batch_modify', formData).then(data => {
                      if (data.code === 200) {
                          message.success('操作成功')
                          stateK.editNameVisible = false
                          getTableList()
                      } else {
                          message.error(data.message || '修改项目简称失败')
                      }
                  })
              })
              .catch(e => {
                  let errMsg = findObjectIndex(stateK.editNameModel, e.values[0])
                  if (errMsg) {
                      message.info(`请检查-${errMsg.name}-模板下的第-${errMsg.index + 1}-条数据`)
                  } else {
                      message.info('请检查数据是否填写完整')
                  }
              })
      }

      function findObjectIndex(dataList, targetObject) {
          // 遍历大数组
          for (const item of dataList) {
              // 在当前对象的data数组中查找目标对象
              const index = item.data.findIndex(obj => {
                  // 检查mappingId是否匹配
                  return obj.projectName === targetObject.projectName
              })
              // 如果找到目标对象，则返回其所在的大数组对象的id和在data数组中的索引
              if (index !== -1) {
                  return { ...item, index: index }
              }
          }
          // 如果未找到目标对象，返回 null
          return null
      }

      function shouldDisplayCountDownWithTooltip(labelList, text) {
          const result = labelList?.filter(label => label.includes(text))
          if (result && result.length > 0) {
              return [true, result[0]]
          } else {
              return false
          }
      }

      function hasHyphen(str) {
          return str.includes('-')
      }

      function hasPlus(str) {
          return str.includes('+')
      }

      function splitStringByColon(inputString) {
          return inputString.split(':')
      }

      const shouldDisplayCountDown = targetDate => {
          const { days } = calculateTimeDifference(targetDate)
          return days >= 0 && days <= 7
      }

      // 新-模板项目审核标准格式
      function handlerGetStandard(data) {
          stateK.standardList = data.assessorStandard.split(/[,;；]/)
      }

      // 新-模板项目审核标准格式
      function handlerGetSpace(data) {
          return data?.split(/[,;；]/)
      }

      // 模板项目附件模板下载
      function attachmentTemplateDownLoad(item) {
          const props = { ...item }
          let xhr = new XMLHttpRequest()
          xhr.open('GET', props.url, true)
          xhr.responseType = 'blob'
          xhr.onload = function () {
              if (xhr.status === 200) {
                  if (window.navigator.msSaveOrOpenBlob) {
                      navigator.msSaveBlob(xhr.response, props.name)
                  } else {
                      let link = document.createElement('a')
                      let body = document.querySelector('body')
                      link.href = window.URL.createObjectURL(xhr.response)
                      link.download = props.name
                      // fix Firefox
                      link.style.display = 'none'
                      body.appendChild(link)
                      link.click()
                      body.removeChild(link)
                      window.URL.revokeObjectURL(link.href)
                  }
              }
          }
          xhr.send()
      }

      const validateShortName = (rule, value, name) => {
          if (!value) {
              return Promise.reject('请输入项目简称')
          } else {
              return Promise.resolve()
          }
      }
      const validateNum = (rule, value, name) => {
          const reg = new RegExp(/^[1-9]\d*$/)
          if (!value) {
              return Promise.reject('请输入排序')
          } else {
              if (value.length > 7) {
                  return Promise.reject('项目简称限制7个字符')
              } else if (!reg.test(value)) {
                  return Promise.reject('请输入正整数')
              } else {
                  return Promise.resolve()
              }
          }
      }
      // tooltip样式
      const standardStyle = {
          maxWidth: 'unset'
      }
      // tooltip样式
      const remarksTool = {
          maxWidth: '150px'
      }
      // tooltip样式
      const labelToolStyle = {
          maxWidth: '1000px'
      }
      const labelCoulmn = [
          {
              title: '加减分类型',
              width: 120,
              dataIndex: 'pointTypeName'
          },
          {
              title: '加减分数',
              width: 100,
              dataIndex: 'taskPoints'
          },
          {
              title: '加减分触发日期',
              width: 200,
              dataIndex: 'updateTime'
          },
          {
              title: '是否扣分',
              width: 120,
              dataIndex: 'deductStatus'
          },
          {
              title: '审批日期',
              width: 200,
              dataIndex: 'taskRectificationPointsTime'
          },
          {
              title: '是否绩效结算',
              width: 200,
              dataIndex: 'settlementView'
          }
      ]

      function getScore(arr) {
          let sum = 0
          if (arr) {
              arr.forEach(item => {
                  if (item.deductStatus === '是') {
                      sum += item.taskPoints || 0 // 如果 taskPoints 为 null 或者 undefined，将其视为 0
                  }
              })
          }
          return sum
      }

      const currentColumn = ref({})

      function getActionList(column, value = null) {
          currentColumn.value = column
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${column.projectId}`, {
              associatedTask: '否',
              taskStatusList: value ? value : ['未启动', '进行中', '审批中', '延期']
          }).then(data => {
              stateK.actionList = data.data.dataList
              stateK.visibleAction = true
          })
      }

      const actionState = reactive({
          riskList: [],
          current: {},
          visibleRisk: false,
          riskColumns: [
              { title: '风险描述', dataIndex: 'riskDescription', width: '300px', align: 'center' },
              { title: '解决方案', dataIndex: 'solution', align: 'center' },
              { title: '风险状态', dataIndex: 'riskState', align: 'center' },
              { title: '提交人', dataIndex: 'createdBy', align: 'center' },
              { title: '提交时间', dataIndex: 'createdTime', align: 'center' },
              { title: '解决人', dataIndex: 'solver', align: 'center' },
              { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' }
          ]
      })

      function handlerActionShowRisks(id) {
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/warn_list/${id}`).then(data => {
              actionState.riskList = data.data
              actionState.current.actionTaskId = id
              actionState.visibleRisk = true
          })
      }

      // 加减分详情弹窗
      // 加减分详情弹窗
      const scoreState = reactive({
          visible: false,
          scoreData: [],
          type: ''
      })

      function showScore(data, type) {
          scoreState.visible = true
          scoreState.scoreData = groupByBusinessDate(data)
          scoreState.type = type
      }

      function groupByBusinessDate(list, key = 'businessDate') {
          const grouped = list.reduce((acc, item) => {
              const groupKey = item[key]
              if (!acc[groupKey]) {
                  acc[groupKey] = {
                      month: groupKey,
                      data: []
                  }
              }
              acc[groupKey].data.push(item)
              return acc
          }, {})

          return Object.values(grouped)
      }

      function calculateTotalTaskPoints(data) {
          let totalTaskPoints = 0

          data.forEach(monthData => {
              monthData.data.forEach(record => {
                  if (record.deductStatus === '是') {
                      // 确保 taskPoints 是数字，并累加到 totalTaskPoints
                      const taskPoints = parseFloat(record.taskPoints)
                      if (!isNaN(taskPoints)) {
                          totalTaskPoints += taskPoints
                      }
                  }
              })
          })

          // 返回保留两位小数的结果
          return parseFloat(totalTaskPoints.toFixed(2))
      }

      function formattedWeekGoals(data) {
          return (data || '--').replace(/\n/g, '<br>')
      }

      const weekTargetState = reactive({
          modalTitle: '',
          pmo: false,
          projectDirector: false,
          currentParams: {
              projectId: undefined
          },
          weekData: [],
          weekTargetVisible: false,
          targetList: [],
          mainTarget: ''
      })
      const weekColumns = ref([
          { title: '核心周目标', dataIndex: 'coreWeekContent', align: 'center', width: 150 },
          {
              title: '优先级',
              dataIndex: 'priority',
              align: 'center',
              width: 80
          },
          {
              title: '项目阶段',
              dataIndex: 'milepostName',
              align: 'center',
              width: 120
          },
          {
              title: '任务名称',
              dataIndex: 'taskName',
              align: 'center',
              width: 100,
              resizable: true
          },
          {
              title: '行动项名称',
              dataIndex: 'actionTaskName',
              align: 'center',
              width: 100,
              resizable: true
          },
          {
              title: '完成标准',
              dataIndex: 'finishStandard',
              align: 'center',
              width: 120,
              resizable: true
          },
          {
              title: '完成情况备注',
              dataIndex: 'finishRemarks',
              align: 'center',
              ellipsis: true,
              width: 150,
              resizable: true
          },
          {
              title: '负责人',
              dataIndex: 'actionTaskOwner',
              align: 'center',
              width: 80
          },
          {
              title: '计划完成时间',
              dataIndex: 'actionTaskEndTime',
              align: 'center',
              width: 100
          },
          {
              title: '实际完成时间',
              dataIndex: 'actionTaskFinishTime',
              align: 'center',
              width: 130
          },
          {
              title: '推进状态',
              dataIndex: 'actionTaskStatus',
              align: 'center',
              width: 120,
              resizable: true
          },
          {
              title: '推进状态更新时间',
              dataIndex: 'modifyDate',
              align: 'center',
              width: 150
          },
          {
              title: '',
              align: 'center',
              width: 50,
              dataIndex: 'expanded'
          }
      ])
      const scrollX = weekColumns.value.reduce((pre, cur) => {
          return parseInt(pre.width) + parseInt(cur.width)
      }, {})

      const weekTableLoading = ref(false)
      const isCJ = ref('项目')

      function showWeekTarget(column, flag) {
          isCJ.value = flag
          weekTableLoading.value = true
          titleMenu.id = isCJ.value ? column.sceneProjectId : column.projectId
          post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
              projectId: isCJ.value ? column.sceneProjectId : column.projectId
          })
              .then(({ data }) => {
                  const now = dayjs()
                  weekTargetState.modalTitle = `${data.title}（当前时间：${now.format('YYYY.MM.DD')}）`
                  weekTargetState.targetList = data.weekGoalsAndPriorityDtoList?.map(item => ({
                      priority: item.priority,
                      id: item.id,
                      editing: false,
                      weekGoals: item.weekGoals,
                      weekGoalsId: item.weekGoalsId
                  }))
                  weekTargetState.weekData = data.weekGoalsTaskDtoList || []
                  weekTargetState.weekTargetVisible = true
                  if (isCJ.value) {
                      weekTargetState.currentParams.projectId = column.sceneProjectId
                  } else {
                      weekTargetState.currentParams.projectId = column.projectId
                  }
                  weekTargetState.pmo = data.pmo
                  weekTargetState.projectDirector = data.projectDirector
              })
              .finally(() => {
                  weekTableLoading.value = false
              })
      }

      const priorityInput = ref(null)
      const statusInput = ref(null)
      const finishInput = ref(null)
      const coreWeekInput = ref(null)
      const handleEdit = async (record, flag, inputRef) => {
          if (!weekTargetState.pmo) {
              message.info('暂无权限')
          } else {
              record[flag] = true
              await nextTick()
              if (inputRef === 'priorityInput' && priorityInput.value) {
                  priorityInput.value.focus()
              }
              if (inputRef === 'statusInput' && statusInput.value) {
                  statusInput.value.focus()
              }
              if (inputRef === 'finishInput' && finishInput.value) {
                  finishInput.value.focus()
              }
              if (inputRef === 'coreWeekInput' && coreWeekInput.value) {
                  coreWeekInput.value.focus()
              }
          }
      }
      const handleEditStatus = async (record, flag, inputRef) => {
          if (!weekTargetState.projectDirector) {
              message.info('暂无权限')
          } else {
              record[flag] = true
              await nextTick()
              if (inputRef === 'statusInput' && statusInput.value) {
                  statusInput.value.focus()
              }
          }
      }
      const handleSave = (record, key, flag) => {
          const { priorityEditing, statusEditing, finishEditing, coreWeekEditing, ...dataToSave } = record
          put('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/action_task', dataToSave)
              .then(data => {
                  if (data.code === 200) {
                      message.success('修改成功')
                  } else {
                      message.success(data.message)
                  }
              })
              .finally(() => {
                  record[flag] = false
                  showWeekTarget(weekTargetState.currentParams)
              })
      }
      const expandedIndices = ref([])
      const isExpanded = index => {
          return expandedIndices.value.includes(index)
      }

      const toggleExpand = index => {
          if (isExpanded(index)) {
              expandedIndices.value = expandedIndices.value.filter(i => i !== index)
          } else {
              expandedIndices.value.push(index)
          }
      }

      async function handlerEditTarget(value, index) {
          if (!weekTargetState.pmo) {
              message.info('暂无权限')
          } else {
              weekTargetState.targetList[index].editing = true
              await nextTick(() => {
                  const textarea = document.querySelector(`.textarea-${index}`)
                  if (textarea) {
                      textarea.focus()
                  }
              })
          }
      }

      function saveTarget(index) {
          const { editing, ...dataToSave } = weekTargetState.targetList[index]
          put('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/priority', dataToSave).then(data => {
              if (data.code === 200) {
                  weekTargetState.targetList[index].editing = false
                  message.success('修改目标成功')
                  showWeekTarget(weekTargetState.currentParams)
              } else {
                  message.error(data.message)
                  showWeekTarget(weekTargetState.currentParams)
              }
          })
      }

      function handleResizeColumn(w, col) {
          col.width = w
      }

      //     无模板项目表格
      const noTemplateState = reactive({
          noTemplateData: [],
          tableLoading: false
      })
      const noTemplateColumns = [
          {
              title: '项目阶段',
              dataIndex: 'projectPhase',
              ellipsis: true,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      style: {
                          padding: '0 5px'
                      },
                      rowSpan: rowSpan
                  }
              },
              align: 'center'
          },
          {
              title: '任务名称',
              dataIndex: 'taskName',
              ellipsis: true,
              align: 'center',
              customCell: item => {
                  return {
                      style: {
                          padding: '0 5px'
                      }
                  }
              }
          },
          {
              title: '任务状态',
              dataIndex: 'taskStatus',
              ellipsis: true,
              width: '130px',
              align: 'center'
          }
      ]
      const mainLoading = reactive({
          loading: false,
          tip: '加载中...'
      })

      function getNoTemplateMilepostList() {
          if (stateNoTemplate.projectName) {
              get(
                  `/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${stateNoTemplate.projectName}/milepost_name/list`
              ).then(data => {
                  stateNoTemplate.milepostList = data.data.dataList.map(item => {
                      return {
                          label: item.milepostName,
                          value: item.milepostId
                      }
                  })
              })
          }
      }

      function getNoTemplateProject() {
          post('/solution-ppm/api/v2/built-in-system-ppm/tpm/noTemplate/select', {
              templateId: activeKey.value
          }).then(data => {
              stateNoTemplate.projectNameList = data.data
          })
      }

      function projectNameChange(value) {
          stateNoTemplate.milepostName = undefined
      }

      function groupCheckData(data) {
          data.forEach(group => {
              let currentMilepostName = '' // 初始化当前里程碑名称为空字符串
              group.data = group.data.map((item, index) => {
                  if (currentMilepostName !== item.projectPhase) {
                      // 如果当前里程碑名称与项目阶段不同
                      currentMilepostName = item.projectPhase // 更新当前里程碑名称
                      let rowSpan = 0
                      for (let i = index; i < group.data.length; i++) {
                          // 计算新组的rowSpan
                          if (currentMilepostName === group.data[i].projectPhase) {
                              rowSpan += 1
                          } else {
                              break // 当遇到不同的项目阶段时，停止计数
                          }
                      }
                      item.rowSpan = rowSpan // 设置当前项目的rowSpan
                  } else {
                      item.rowSpan = 0 // 对于组中间的项目，设置rowSpan为0
                  }
                  return item // 返回修改后的项目
              })
          })
          return data // 返回修改后的数据
      }

      const titleMenu = reactive({
          visible: false,
          id: undefined
      })

      function showContextMenu(event, index, column) {
          titleMenu.visible = true
      }

      function handleShowTask() {
          put(`/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/batch_action_task/${titleMenu.id}`).then(data => {
              if (data.code === 200) {
                  message.success('恢复成功')
                  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
                      projectId: titleMenu.id
                  }).then(data => {
                      weekTargetState.weekData = data.data.weekGoalsTaskDtoList || []
                  })
              }
          })
      }

      function handleHideTask() {
          let params = menuData.value
          params.taskStatus = '0'
          put(`/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/action_task`, params).then(data => {
              if (data.code === 200) {
                  message.success('隐藏成功')
                  post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
                      projectId: titleMenu.id
                  }).then(data => {
                      weekTargetState.weekData = data.data.weekGoalsTaskDtoList || []
                  })
              } else {
                  message.error(data.message)
              }
          })
      }

      onMounted(() => {
          document.addEventListener('click', handleGlobalClick)
          document.body.removeEventListener('click', bodyClick)
      })

      onBeforeUnmount(() => {
          document.removeEventListener('click', handleGlobalClick)
      })

      function handleGlobalClick() {
          if (titleMenu.visible) {
              titleMenu.visible = false
          }
      }

      const menuStyle = ref({
          position: 'absolute',
          top: '0',
          left: '0',
          border: '1px solid #eee',
          color: '#3875ff',
          padding: '0 10px',
          cursor: 'pointer'
      })
      const menuData = ref({})
      const menuVisible = ref(false)
      const bodyClick = () => {
          menuVisible.value = false
          document.body.removeEventListener('click', bodyClick)
      }

      const customClick = (record, index) => {
          return {
              onContextmenu: event => {
                  event.preventDefault()
                  menuVisible.value = true
                  menuData.value = record

                  // 计算菜单的位置
                  const modalElement = document.querySelector('.menu-modal')
                  const modalRect = modalElement.getBoundingClientRect()
                  const topOffset = event.clientY - modalRect.top
                  const leftOffset = event.clientX - modalRect.left - 180

                  // 设置菜单的样式
                  // menuStyle.value = {
                  //   top: `${topOffset}px`,
                  //   left: `${leftOffset}px`,
                  // };
                  menuStyle.value.top = `${topOffset}px`
                  menuStyle.value.left = `${leftOffset}px`

                  // 添加点击 body 隐藏菜单的事件监听
                  document.body.addEventListener('click', bodyClick)
              },
              style: {
                  cursor: 'pointer'
              }
          }
      }

      const hideTask = reactive({})

      function tipMessage() {
          message.info('该任务已隐藏')
      }

      const statuState = reactive({
          visible: false,
          list: []
      })

      function getTaskStatus(id, type) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
              data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  statuState.visible = true
                  statuState.list = data.data
              }
          )
      }

      const getIconStatus = status => {
          if (status === 'finish') {
              return 'finish'
          } else if (status === 'process') {
              return 'process'
          } else {
              return 'error'
          }
      }
      const isHasTypeFilter = ref(false)
      function getIsHasFilter() {
          let item = stateK.templateList.find(item => item.templateId === activeKey.value)
          if (item && item.templateType === '交付项目') {
              isHasTypeFilter.value = true
          } else if (item && item.templateType !== '交付项目') {
              isHasTypeFilter.value = false
          }
      }
      const phaseInfo = reactive({
          milepostName: '',
          milepostGoals: '',
          milepostCriticalPath: '',
          modelOpen: false
      })
      const handleShowDetail = info => {
          console.log(info)
          phaseInfo.milepostName = info.milepostName
          phaseInfo.milepostGoals = info.milepostGoals
          phaseInfo.milepostCriticalPath = info.milepostCriticalPath
          phaseInfo.modelOpen = true
      }
      const detailColumns = ref([
          {
              title: '任务名称',
              dataIndex: 'taskName',
              ellipsis: true,
              resizable: true,
              width: 200,
              fixed: 'left',
              align: 'left',
              customCell: ({ level, nodeType, aa, rowIndex, groupTask }) => {
                  return {
                      style: {
                          paddingLeft: `${(level + 1) * 20}px`,
                          color: `${groupTask ? '#3875ff' : ''}`,
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '任务状态',
              dataIndex: 'taskStatus',
              resizable: true,
              ellipsis: false,
              width: 100,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '计划开始',
              dataIndex: 'startTime',
              resizable: true,
              ellipsis: true,
              width: 100,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '实际开始',
              dataIndex: 'actualStarTime',
              resizable: true,
              ellipsis: true,
              width: 120,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '计划完成',
              dataIndex: 'endTime',
              ellipsis: true,
              width: 100,
              resizable: true,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '	实际完成',
              dataIndex: 'taskFinishTime',
              ellipsis: true,
              resizable: true,
              width: 150,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '任务负责人',
              dataIndex: 'taskOwner',
              resizable: true,
              ellipsis: true,
              width: 100,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '审核员',
              dataIndex: 'assessorName',
              resizable: true,
              ellipsis: true,
              width: 80,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },

          {
              title: '任务执行人',
              resizable: true,
              dataIndex: 'taskParticipantStr',
              ellipsis: true,
              width: 120,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '附件',
              dataIndex: 'attachment',
              resizable: true,
              ellipsis: true,
              width: 200,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '未关闭风险数量',
              dataIndex: 'unclosedRiskNumber',
              resizable: true,
              ellipsis: true,
              width: 120,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          },
          {
              title: '风险数量',
              dataIndex: 'riskNumber',
              resizable: true,
              ellipsis: true,
              width: 80,
              align: 'center',
              customCell: ({ rowSpan, rowIndex, aa }) => {
                  return {
                      style: {
                          borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                      }
                  }
              }
          }
      ])
      const height = window.innerHeight
      const headerOffset = ref(210)
      const calcTableHeight = () => {
          stateK.tableHeight = window.innerHeight - 150 - headerOffset.value
      }

      onMounted(() => {
          calcTableHeight()
          window.addEventListener('resize', calcTableHeight)
      })

      onBeforeUnmount(() => {
          window.removeEventListener('resize', calcTableHeight)
      })
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }
  .vid_3lguy80ipe{
      padding-top:24px;
      padding-bottom:24px;
      background-color:#F90707
  }
  .vid_82xqfhwr8a{
      box-shadow:0px 0px 0px 0px
  }

  /*
  样式
  */
      .page_root {
          overflow: hidden;
      }

      .kb-page {
          padding: 0 20px 20px 20px;
          height: 100%;
          position: relative;
          background-color: #fff;
          border-radius: 6px;
      }

      .search-div {
          background-color: #fff;
          margin-bottom: 16px;
          height: 72px;
          padding: 0 20px;
          border-radius: 6px;
      }

      .table-tip {
          display: flex;
          height: 63px;
          justify-content: space-between;
      }

      .finish,
      .running,
      .unstart,
      .daily {
          display: flex;
          line-height: 62px;
          margin-right: 13px;
      }

      .unstart {
          margin-right: 24px;
      }

      .left-top {
          display: flex;
      }

      .right {
          flex: 1;
          display: flex;
          justify-content: end;
      }

      .finish-box,
      .running-box,
      .unstart-box,
      .daily-box,
      .association-daily-box {
          background: #4cdf95;
          border-radius: 4px;
          width: 20px;
          height: 20px;
          margin: 20px 0;
      }

      .tip-msg {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
      }

      .running-box {
          background: #7aa1f9;
          border-radius: 4px;
      }

      .unstart-box {
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          background-color: #fff;
      }

      .daily-box {
          background: #ff5656;
          border-radius: 4px;
      }

      .association-daily-box {
          background: #ffc756;
          border-radius: 4px;
      }

      .one-click,
      .hover-click,
      .db-click,
      .cercle-click,
      .squire-click {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
          display: flex;
          line-height: 62px;
          margin-right: 16px;
      }

      .one-click-icon,
      .db-click-icon,
      .hover-click-icon,
      .cercle-click-icon,
      .squire-click-icon {
          width: 16px;
          height: 16px;
          background-size: cover;
          margin: 22px 0;
          margin-right: 4px;
      }

      .one-click-icon {
          background-image: url('@/assets/images/a7a85f6b8e057dd9962e98cd32bcca58.png');
          background-size: cover;
      }

      .db-click-icon {
          background-image: url('@/assets/images/776b15710d6117324c72898ac5f140af.png');
          background-size: cover;
      }

      .hover-click-icon {
          background-image: url('@/assets/images/154bd3698d359550f2f445291f78f8aa.png');
          background-size: cover;
      }

      .cercle-click-icon {
          background-image: url('@/assets/images/430cdad0845c8fcd6e14e841b6f03abf.png');
          background-size: cover;
      }

      .squire-click-icon {
          background-image: url('@/assets/images/dfffab3211ffca44ae68fa494c9f4819.png');
          background-size: cover;
      }

      .record-div-green,
      .record-div-red,
      .record-div-white,
      .record-div-blue,
      .record-div-orange,
      .record-div-hidden {
          min-width: 10px;
          min-height: 10px;
          width: 100%;
          height: 30px;
          position: relative;
      }

      .icon-hollow,
      .icon-solid,
      .icon-hollow-deep,
      .icon-solid-deep {
          width: 16px;
          height: 16px;
          position: absolute;
          top: 50%;
          right: -5px;
          transform: translate(-50%, -50%);
          cursor: pointer;
      }

      .icon-hollow {
          background-image: url('@/assets/images/51aecf80eea1e874f01531b5de93bd3d.png');
          background-size: cover;
      }

      .icon-solid {
          background-image: url('@/assets/images/5602f9d19ee64cd5cff406591db748e9.png');
          background-size: cover;
      }

      .icon-hollow-deep {
          background-image: url('@/assets/images/3376e7d11da6482ae1aa9989973b885c.png');
          background-size: cover;
      }

      .icon-solid-deep {
          background-image: url('@/assets/images/508d77151051dce7c867a6bcc503402b.png');
          background-size: cover;
      }

      .tool-tip {
          display: inline-block;
          width: 16px;
          height: 16px;
      }

      .record-div-blue {
          background-color: #7aa1f9;
      }

      .record-div-red {
          background-color: #ff5656;
      }

      .record-div-green {
          background-color: #4cdf95;
      }

      .record-div-orange {
          background-color: #ffc756;
      }

      .record-div-hidden {
          min-width: 164px;
          height: 30px;
          background-color: #d9d9d9;
      }

      /*
  任务列表样式
  */

      /* 倒计时 */
      .count-down {
          border-radius: 1px;
          background: rgba(255, 123, 0, 0.1);
          color: #ff7b00;
          height: 14px;
          min-width: 15%;
          margin-right: 3px;
          margin-bottom: 3px;
      }

      /* 全组 */
      .weight-num {
          font-weight: 600;
      }

      .all-group-yes {
          border-radius: 1px;
          background: rgba(48, 191, 120, 0.1);
          color: #30bf78;
          height: 14px;
          width: 15%;
          line-height: 14px;
          margin-right: 3px;
          margin-bottom: 3px;
      }

      /* 项目经理 */
      .pm-score-yes {
          border-radius: 1px;
          background: rgba(48, 191, 120, 0.1);
          color: #30bf78;
          height: 14px;
          line-height: 14px;
          margin-right: 3px;
          width: 15%;
      }

      /* 负责人 */
      .ower-score-yes {
          border-radius: 1px;
          background: rgba(48, 191, 120, 0.1);
          color: #30bf78;
          height: 14px;
          line-height: 14px;
          width: 50%;
      }

      .all-group-no {
          border-radius: 1px;
          background: rgba(245, 34, 45, 0.1);
          color: #f5222d;
          height: 14px;
          width: 50%;
          line-height: 14px;
          margin-bottom: 3px;
          margin-right: 3px;
      }

      /* 项目经理 */
      .pm-score-no {
          border-radius: 1px;
          background: rgba(245, 34, 45, 0.1);
          color: #f5222d;
          height: 14px;
          line-height: 14px;
          margin-right: 3px;
          width: 50%;
      }

      /* 负责人 */
      .ower-score-no {
          border-radius: 1px;
          background: rgba(245, 34, 45, 0.1);
          color: #f5222d;
          height: 14px;
          line-height: 14px;
          width: 50%;
          margin-right: 3px;
      }

      .count-down-hover {
          color: #262626;
      }

      .count-down-hover > p {
          margin: 0;
      }

      .attachment-template {
          display: block;
          overflow-x: auto; /* 允许横向滚动 */
          overflow-y: hidden; /* 隐藏垂直滚动条 */
          scrollbar-width: thin; /* Firefox 64+ */
          scrollbar-color: transparent transparent; /* Firefox 64+ */
      }

      .attachment-template::-webkit-scrollbar {
          height: 0px; /* 谷歌、Safari、Edge等浏览器 */
      }

      .attachment-template::-webkit-scrollbar-thumb {
          background-color: transparent; /* 设置滚动条的颜色为透明 */
      }

      .extension-color {
          border-radius: 1px;
          background: rgba(89, 89, 89, 0.1);
          color: #595959;
          height: 14px;
          min-width: 15%;
          margin-right: 3px;
          margin-bottom: 3px;
      }

      .count-down-content {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          padding: 12px 10px;
      }

      .count-down-content-detail {
          display: flex;
          flex-wrap: wrap;
          width: 50%;
          padding: 12px 10px;
      }

      .count-down-content-detail > div {
          box-sizing: border-box;
          height: 14px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
      }

      .count-down-content > div {
          box-sizing: border-box;
          height: 14px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
      }

      /*任务列表样式*/
      :deep(.ant3-tabs-top > .ant3-tabs-nav) {
          margin: 0;
          border-bottom: 1px solid #d9d9d9;
      }

      .task-detail {
          height: 700px;
          overflow-y: auto;
      }

      .fold-rows {
          width: 220px; /* 设置div宽度为220px */
          overflow: hidden; /* 隐藏超出部分 */
          white-space: nowrap; /* 不换行 */
          text-overflow: ellipsis; /* 显示省略号 */
      }

      .wqd-btn,
      .yq-btn,
      .wc-btn,
      .yqwc-btn,
      .jxz-btn,
      .spz-btn {
          background: #ffffff;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          letter-spacing: 0;
          text-align: center;
          line-height: 40px;
          font-weight: 400;
          width: 66px;
          height: 22px;
          line-height: 22px;
          margin: 0 auto;
      }

      .wc-btn {
          border: 1px solid rgba(48, 191, 120, 1);
          color: #30bf78;
      }

      .yq-btn {
          border: 1px solid rgba(224, 32, 32, 1);
          color: #e02020;
      }

      .wqd-btn {
          border: 1px solid rgba(140, 140, 140, 1);
          color: #8c8c8c;
      }

      .jxz-btn {
          border: 1px solid rgba(56, 117, 255, 1);
          color: #3875ff;
      }

      .yqwc-btn {
          border: 1px solid rgba(255, 152, 70, 1);
          color: #ff9846;
      }

      .spz-btn {
          border: 1px solid #00b4ec;
          color: #00b4ec;
      }

      .attr {
          overflow-y: auto;
      }

      .two-line {
          border: 1px solid #afc8ff;
          display: flex;
          height: 40px;
          line-height: 40px;
      }

      .two-item {
          display: flex;
          width: 50%;
      }

      .two-left {
          padding: 0 7px;
          text-align: right;
          width: 150px;
          background-color: #ebf1ff;
      }

      .two-right {
          border-left: 1px solid #afc8ff;
          border-right: 1px solid #afc8ff;
          flex: 1;
          padding: 0 7px;
      }

      .text-bold {
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
      }

      .one-line {
          display: flex;
          min-height: 40px;
          line-height: 40px;
          border: 1px solid #afc8ff;
      }

      .one-left {
          background-color: #ebf1ff;
          width: 150px;
          padding: 0 7px;
          text-align: right;
      }

      .one-right {
          padding: 0 7px;
          flex: 1;
          border-left: 1px solid #afc8ff;
      }

      .risk-num {
          color: #3875ff;
          cursor: pointer;
      }

      .one-line,
      .two-line {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
      }

      a {
          color: #3875ff;
      }

      .task-dependency {
          white-space: pre-wrap;
      }

      .task-name-long {
          display: inline-block;
          width: 300px;
          overflow: hidden; /* 隐藏超出部分 */
          white-space: nowrap; /* 不换行 */
          text-overflow: ellipsis; /* 显示省略号 */
      }

      .edit-form {
          margin-top: 16px;
          height: 500px;
          overflow-y: auto;
          overflow-x: hidden;
      }

      .risk-num-white,
      .risk-num-red,
      .risk-num-blue,
      .risk-num-green {
          position: absolute;
          right: 20px;
          top: 9px;
          font-size: 10px;
          color: #fff;
          cursor: pointer;
          font-weight: 600;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid white;
          background-color: transparent;
          line-height: 10px;
      }

      .risk-num-white {
          border: 1px solid #262626;
      }

      .action-num-white,
      .action-num-red,
      .action-num-blue,
      .action-num-green {
          position: absolute;
          right: 38px;
          top: 10px;
          font-size: 10px;
          color: #fff;
          cursor: pointer;
          width: 12px;
          height: 12px;
          border-radius: 4px; /* 设置圆角大小 */
          border: 1px solid white;
          background-color: transparent;
          line-height: 9px;
          font-weight: 600;
      }

      .action-num-white {
          color: #262626;
          border: 1px solid #262626;
      }

      .task-ower-white,
      .task-ower-red,
      .task-ower-blue,
      .task-ower-green {
          position: absolute;
          left: 3px;
          top: 3px;
          font-size: 12px;
          color: #fff;
      }

      .risk-num-white,
      .risk-num-white {
          color: #666666;
      }

      .task-ower-white {
          color: #262626;
      }

      //    里程碑终验初验
      .task-name {
          position: relative;
          height: 40px;
          line-height: 40px;
          width: 220px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .task-milestone {
          position: absolute;
          top: 13px;
          left: 9px;
          width: 45px;
          height: 14px;
          font-size: 12px;
          line-height: 14px; /* 与高度相同 */
          color: #3875ff;
          background: #ebf1ff;
          text-align: center;
      }

      .task-first {
          position: absolute;
          top: 13px;
          left: 16px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/323d370d1ad33c170193f9f229fc11b1.png');
          background-size: cover;
      }

      .task-over {
          position: absolute;
          top: 13px;
          left: 16px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/fa6561569af1852779db3c70ce2cd4b6.png');
          background-size: cover;
      }

      .is-first {
          margin-left: 55px;
      }

      .is-first-no {
          margin-left: 16px;
      }

      .task-name-title {
          display: inlie-block;
          min-width: 50px;
      }

      .finish-standard {
          display: inlie-block;
          min-width: 70px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
      }

      .no-first {
          margin-left: 20px;
      }

      /*关键路径*/
      .critical-path {
          position: absolute;
          top: 13px;
          left: 5px;
          font-size: 12px;
          width: 60px;
          height: 14px;
          line-height: 14px; /* 与高度相同 */
          color: #ff9846;
          background: #fff5ed;
          text-align: center;
      }

      .task-milestone-right {
          left: 70px;
      }

      .is-first-path {
          margin-left: 115px;
      }

      .task-first-right {
          position: absolute;
          top: 13px;
          left: 70px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/323d370d1ad33c170193f9f229fc11b1.png');
          background-size: cover;
      }

      .task-over-right {
          position: absolute;
          top: 13px;
          left: 70px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/fa6561569af1852779db3c70ce2cd4b6.png');
          background-size: cover;
      }

      .is-first-path-no-mark {
          margin-left: 70px;
      }

      .kb-title {
          position: relative;
          cursor: pointer;
          text-align: center;
      }

      .kb-title-icon {
          position: absolute;
          right: 5px;
          top: 4px;
          font-size: 12px;
          color: #888b92;
          cursor: pointer;
          width: 14px;
          height: 14px;
          border-radius: 4px; /* 设置圆角大小 */
          border: 1px solid #888b92;
          background-color: transparent;
          line-height: 12px;
          font-weight: 600;
          text-align: center;
      }

      .cj-title-icon {
          position: absolute;
          left: 5px;
          top: 3px;
          font-size: 12px;
          cursor: pointer;
          width: 14px;
          height: 14px;
      }

      .count-down-content {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          padding: 0 5px;
      }

      .count-down-content > div {
          box-sizing: border-box;
          height: 14px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
      }

      /* 倒计时 */
      .count-down {
          border-radius: 1px;
          background: rgba(255, 123, 0, 0.1);
          color: #ff7b00;
          height: 14px;
          min-width: 52%;
          margin-right: 3px;
          margin-bottom: 3px;
      }

      /* 全组 */
      .weight-num {
          font-weight: 600;
      }

      .all-group-yes {
          border-radius: 1px;
          background: rgba(48, 191, 120, 0.1);
          color: #30bf78;
          height: 14px;
          width: 52%;
          line-height: 14px;
          margin-right: 3px;
          margin-bottom: 3px;
      }

      /* 项目经理 */
      .pm-score-yes {
          border-radius: 1px;
          background: rgba(48, 191, 120, 0.1);
          color: #30bf78;
          height: 14px;
          line-height: 14px;
          margin-right: 3px;
          width: 45%;
          margin-bottom: 3px;
      }

      /* 负责人 */
      .ower-score-yes {
          border-radius: 1px;
          background: rgba(48, 191, 120, 0.1);
          color: #30bf78;
          height: 14px;
          line-height: 14px;
          width: 50%;
          margin-right: 3px;
      }

      .all-group-no {
          border-radius: 1px;
          background: rgba(245, 34, 45, 0.1);
          color: #f5222d;
          height: 14px;
          width: 44%;
          line-height: 14px;
          margin-bottom: 3px;
          margin-right: 3px;
      }

      /* 项目经理 */
      .pm-score-no {
          border-radius: 1px;
          background: rgba(245, 34, 45, 0.1);
          color: #f5222d;
          height: 14px;
          line-height: 14px;
          margin-right: 3px;
          width: 45%;
      }

      /* 负责人 */
      .ower-score-no {
          border-radius: 1px;
          background: rgba(245, 34, 45, 0.1);
          color: #f5222d;
          height: 14px;
          line-height: 14px;
          width: 50%;
          margin-right: 3px;
      }

      .count-down-hover {
          color: #262626;
      }

      .count-down-hover > p {
          margin: 0;
      }

      .score-title-first {
          background: rgba(250, 173, 20, 0.1);
          color: #262626;
          height: 36px;
          line-height: 36px;
          padding: 0 16px;
      }

      .score-title {
          font-size: 16px;
          color: #262626;
          font-weight: 600;
          margin: 18px 0;
      }

      .score-num {
          font-size: 18px;
          color: #3875ff;
          font-weight: 600;
      }

      .score-num-red {
          color: #f5222d;
          font-weight: 600;
      }

      .score-month {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
          margin-bottom: 12px;
      }

      .month-score {
          font-size: 16px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
          display: inline-block;
          margin-left: 24px;
      }

      .default-score {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
      }

      .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #fff;
          padding: 8px 16px;
          border: none;
      }

      .score-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 16px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #ebf1ff;
          color: #262626;
          font-weight: 600;
          padding: 8px 4px;
          border-right: 1px solid #d9d9d9 !important;
      }

      .target-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #ebf1ff;
          color: #262626;
          font-weight: 600;
          padding: 8px 4px;
      }

      .target-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #ebf1ff;
          color: #262626;
          font-weight: 600;
          padding: 8px 4px;
      }

      .target-table-box:deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 8px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 8px 16px;
          border-right: 1px solid #d9d9d9;
      }

      .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 8px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      :deep(
              .kb-table-box
                  .ant3-table.ant3-table-bordered
                  > .ant3-table-container
                  > .ant3-table-body
                  > table
                  > tbody
                  > tr
                  > td
          ) {
          border: 1px solid #d9d9d9;
          color: #262626;
          border-left: none;
      }

      :deep(.kb-table-box .ant3-table-tbody tr) {
          line-height: 22px;
          height: 30px;
          padding: 2px 0;
      }

      .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #595959;
          border-bottom: 1px solid #d9d9d9;
          padding: 2px 0;
          word-break: break-all;
      }

      :deep(.table-striped td) {
          background-color: #fafafa;
      }

      .risk-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #fff;
          padding: 8px 16px;
          border: none;
      }

      .risk-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 16px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      .count-down-content {
          cursor: pointer;
      }

      .target-message {
          display: flex;
          margin-bottom: 7px;
          line-height: 32px;
      }

      .target-title {
          width: 150px;
          font-size: 14px;
          color: #595959;
          font-weight: 400;
          text-align: right;
      }

      .target-content {
          position: relative;
          flex: 1;
      }

      .target-span {
          width: 100%;
          display: inline-block;
          cursor: pointer;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          vertical-align: top;
          font-size: 14px;
          color: #262626;
          font-weight: 400;
      }

      .target-span[style*='height: auto;'] {
          white-space: normal;
      }

      .priority-edit {
          display: inline-block;
          width: 100%;
          cursor: pointer;
      }

      .target-table-box
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th {
          border-right: 1px solid #d9d9d9;
      }

      .custom-title {
          display: inline-block;
          width: 100%;
          text-align: left;
      }

      .target-table-box {
          margin-top: 16px;
          position: relative;
      }

      .no-template-main {
          width: 100%;
          overflow-x: auto;
          height: calc(100% - 200px);
          display: flex;
          padding-bottom: 8px;
          padding-left: 1px;
      }

      .table-item {
          margin-top: 1px;
          width: 530px;
          margin-right: 16px;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          padding: 16px;
          background-color: #fff;
          flex-shrink: 0;
      }

      .table-item:last-child {
          margin-right: 0;
      }

      .table-title {
          margin-bottom: 13px;
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
          height: 16px;
          line-height: 16px;
          border-left: 4px solid #3875ff;
          padding-left: 8px;
          cursor: pointer;
          position: relative;
      }

      .action-title-icon {
          position: absolute;
          right: 0;
          top: 4px;
          font-size: 12px;
          color: #888b92;
          cursor: pointer;
          width: 14px;
          height: 14px;
          border-radius: 4px; /* 设置圆角大小 */
          border: 1px solid #888b92;
          background-color: transparent;
          line-height: 12px;
          font-weight: 600;
          text-align: center;
      }

      .table-item
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
      }

      .table-item :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #595959;
          border-bottom: 1px solid #d9d9d9;
          padding: 2px 0;
          word-break: break-all;
      }

      :deep(.table-item .ant3-table-tbody tr) {
          line-height: 22px;
          height: 30px;
          padding: 2px 0;
      }

      :deep(
              .table-item
                  .ant3-table.ant3-table-bordered
                  > .ant3-table-container
                  > .ant3-table-body
                  > table
                  > tbody
                  > tr
                  > td
          ) {
          border: 1px solid #d9d9d9;
          color: #262626;
          border-left: none;
      }

      .table-item:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #ebf1ff;
          color: #262626;
          font-weight: 600;
          padding: 8px 4px;
          border-bottom: 1px solid #d9d9d9;
      }

      .action-select {
          display: flex;
          justify-content: start;
      }

      .no-template-content {
          height: 100%;
          width: 100%;
          position: relative;
      }

      .no-img {
          background-image: url('@/assets/images/eaf6b5e4041ad3049dc8148d88e8d86e.png');
          background-size: cover;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          width: 200px;
          height: 100px;
      }

      .tip-msg-img {
          position: relative;
          top: 90px;
          left: 65px;
      }

      .context-menu {
          position: absolute;
          right: 50px;
          top: 10px;
      }

      /*样式*/

      .title-new-status {
          height: 62px;
          line-height: 36px;
          padding: 0 16px;
          margin-bottom: 16px;
          background-image: url('@/assets/images/18c5598e33c9488e1925bf0bd3b80ebb.png');
          background-size: cover;
          border: 1px solid #3875ff;
          border-radius: 5px;
      }

      :deep(.ant3-steps-item-container) {
          padding: 0 16px;
      }

      :deep(.ant3-steps-item-tail::after) {
          margin-left: 12px;
          background-color: #3875ff;
      }

      :deep(.ant3-steps-item-description) {
          font-size: 12px;
          color: #595959;
          text-align: left;
          line-height: 20px;
          font-weight: 400;
      }

      :deep(.ant3-steps-item-icon) {
          width: 24px;
          height: 24px;
          line-height: 24px;
          color: #3875ff;
          margin-top: 6px;
      }

      :deep(.ant3-steps-item-title) {
          height: 28px;
          font-size: 14px;
          color: #262626;
          text-align: left;
          line-height: 22px;
          font-weight: 400;
      }

      :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
          background-color: #3875ff;
      }

      :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
          background: #3875ff;
      }

      :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
          border-color: #3875ff;
      }

      :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
          color: #3875ff !important;
      }

      .task-status-new {
          cursor: pointer;
      }

      .left-title,
      .right-title {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          letter-spacing: 0;
          text-align: left;
          font-weight: 400;
          height: 31px;
          line-height: 31px;
      }

      .weight-status {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
      }

      .batch-line {
          width: 100%;
          border-top: 1px solid #d9d9d9;
          margin: 16px 0;
      }

      .weight-status-new {
          font-weight: 600;
          color: #262626;
      }

      .phase-wrapper {
          max-height: 800px;
          .title {
              font-size: 16px;
              color: #262626;
              font-weight: 600;
              padding-left: 24px;
              margin-bottom: 12px;
              background: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor6bmg4UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MDAsIC0xODgpIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC0yMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjc2LCAxMTEpIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QtMjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LCA3MykiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSLpobnnm67pmLbmrrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDQpIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIsIDAuNSkiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgc3Ryb2tlPSIjMzg3NUZGIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjExIiBoZWlnaHQ9IjE0IiByeD0iMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxpbmUgeDE9IjQuODc1IiB5MT0iMy43NSIgeDI9IjkuMzc1IiB5Mj0iMy43NSIgaWQ9Iui3r+W+hCIgc3Ryb2tlPSIjMzg3NUZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvbGluZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxsaW5lIHgxPSI0Ljg3NSIgeTE9IjcuNSIgeDI9IjkuMzc1IiB5Mj0iNy41IiBpZD0i6Lev5b6EIiBzdHJva2U9IiMzODc1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9saW5lPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxpbmUgeDE9IjQuODc1IiB5MT0iMTEuMjUiIHgyPSI5LjM3NSIgeTI9IjExLjI1IiBpZD0i6Lev5b6EIiBzdHJva2U9IiMzODc1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9saW5lPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuNjI1LDQuNSBDMy4wMzkyMjUsNC41IDMuMzc1LDQuMTY0MjI1IDMuMzc1LDMuNzUgQzMuMzc1LDMuMzM1Nzc1IDMuMDM5MjI1LDMgMi42MjUsMyBDMi4yMTA3NzUsMyAxLjg3NSwzLjMzNTc3NSAxLjg3NSwzLjc1IEMxLjg3NSw0LjE2NDIyNSAyLjIxMDc3NSw0LjUgMi42MjUsNC41IFoiIGlkPSLot6/lvoQiIGZpbGw9IiMzODc1RkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yLjYyNSw4LjI1IEMzLjAzOTIyNSw4LjI1IDMuMzc1LDcuOTE0MjI1IDMuMzc1LDcuNSBDMy4zNzUsNy4wODU3NzUgMy4wMzkyMjUsNi43NSAyLjYyNSw2Ljc1IEMyLjIxMDc3NSw2Ljc1IDEuODc1LDcuMDg1Nzc1IDEuODc1LDcuNSBDMS44NzUsNy45MTQyMjUgMi4yMTA3NzUsOC4yNSAyLjYyNSw4LjI1IFoiIGlkPSLot6/lvoQiIGZpbGw9IiMzODc1RkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yLjYyNSwxMiBDMy4wMzkyMjUsMTIgMy4zNzUsMTEuNjY0MjI1IDMuMzc1LDExLjI1IEMzLjM3NSwxMC44MzU3NzUgMy4wMzkyMjUsMTAuNSAyLjYyNSwxMC41IEMyLjIxMDc3NSwxMC41IDEuODc1LDEwLjgzNTc3NSAxLjg3NSwxMS4yNSBDMS44NzUsMTEuNjY0MjI1IDIuMjEwNzc1LDEyIDIuNjI1LDEyIFoiIGlkPSLot6/lvoQiIGZpbGw9IiMzODc1RkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+')
                  no-repeat left center / 16px 16px;
          }
          .content {
              margin-bottom: 12px;
              &:last-child {
                  margin-bottom: 0;
              }
              .sub-title {
                  font-size: 14px;
                  color: #595959;
                  font-weight: 500;
                  margin-bottom: 8px;
              }
              .text {
                  white-space: pre-wrap;
                  border: 1px solid #d9d9d9;
                  border-radius: 2px;
                  width: 520px;
                  max-height: 280px;
                  overflow: auto;
                  font-size: 14px;
                  color: #262626;
                  line-height: 22px;
                  font-weight: 400;
                  padding: 8px 12px;
              }
          }
      }
      .detail-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 8px 8px;
          border-right: 1px solid #d9d9d9 !important;
          position: relative;
      }
      .detail-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          border-bottom: 1px solid #d9d9d9;
          padding: 3px 8px;
          word-break: break-all;
      }
      .detail-title {
          height: 14px;
          line-height: 14px;
          font-weight: 600;
          padding-left: 8px;
          border-left: 4px solid #3875ff;
          margin: 16px 0;
      }
</style>